0

サイトで JavaScript の使用を開始するたびに、ページの上部にスクロールされます。これを防ぐにはどうすればよいですか? Web ページは外部の .js ファイルに接続しており、多くの場合、.php ファイルから情報を取得しています (SQL 接続はまだありません)。

すべての JS 関数は、ページをリロードせずにページのコンテンツを変更します。つまり、次のようなものです-

document.getElementById('element').innerHTML=xmlhttp.responseText;

それはゲームになり、できればFacebookで！ページの先頭に自動的に戻る「スナップ」は非常に面倒で面倒です。これを防ぐ方法はありますか？

編集：尋ねられたように明確にするために。（ところで、反応してくれてありがとう！）

<a href="#" onclick="showData(1);"><img src="./images/qstata.png" /></a> 

function showData(str)
{
if (str=="")
  {
  document.getElementById("currentactivity").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("currentactivity").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","index.php?q="+str,true);
xmlhttp.send();
}

これは私が使用しているコードの例の 1 つです。私はまだ学習中であるため、コードを作成する際にさまざまなスタイルを使用しています。以下にもう 1 つの例を示します。

function missionPop()
{
  var iframe= document.getElementById('missioniframe')
  iframe.style.visibility='visible';
}

返事を待っているので、あなたの提案pebblを試してみます！

4

2 に答える 2

2

上記のコメントで述べたように、要素のコンテンツが置き換えられた場合、ブラウザはその要素の上部までスクロールして補正します。

要素に固定の高さを割り当てて、コンテンツが変更されたときにサイズが変更されないようにすることで、これを回避できます。または、新しい情報を要素に置き換えるのではなく、要素に追加することもできます (それが更新のポイントを無効にしない場合)。

編集：

return false;関数の最後に追加します。これにより、ハッシュ リンクの効果が無効になります。詳細については、pebbl の回答を参照してください。

于 2012-08-28T13:21:40.980 に答える
1

ジャンプするハッシュタグ

#hashtagその音で、hrefにあるリンクに JavaScript イベントを追加しています。

<a href="#hashtag">Click Me</a>

undefined#hastagを呼び出すと、スクロールがページの先頭に戻ります。イベントリスナー関数を適用するために使用しているものは何でも、クリックイベントをキャンセルしてジャンプを停止する必要があります。

問題

次のコードは、発生している問題を引き起こします。

<a href="#" id="click_link">Click me</a>

<script type="text/javascript">

  function click_me(){
    document.getElementByTagName('body')[0].style.background = '#F00';
  }

  window.onload = function(){
    document.getElementById('click_link').onclick = click_me;
  }

</script>


解決

以下を追加するだけで、クリックがリンク上で継続するのを防ぐことができます。これにより、#hashtag がトリガーされなくなり、ページのジャンプが停止します。

<a href="#" id="click_link">Click me</a>

<script type="text/javascript">

  function click_me(){
    document.getElementByTagName('body')[0].style.background = '#F00';
    return false; /// return false tells the event to cancel
  }

  window.onload = function(){
    document.getElementById('click_link').onclick = click_me;
  }

</script>

しかし、それはすべて、イベント ハンドラーを定義するために何を使用しているかによって異なります。


イベントのキャンセル

...インライン ハンドラを使用

インライン ハンドラーは、onclick 属性が関数の本体部分としてレンダリングされるかのように処理する必要があります。つまり、実際には、評価されたときにあることclick_me();return false;に変換されます。これが、関数をトリガーするのではなく、変数にアクセスするだけなので、機能しないfunction(){click_me();return false;}などの理由です。onclick="click_me"

<a href="#" onclick="click_me();return false;">Click Me</a>
<a href="#" onclick="return click_me();">Click Me</a>


...js プロパティ ハンドラを使用

プロパティ ハンドラーを使用すると、本体だけでなく関数全体を提供しますが、プリンシパルは同じです。return false;は、あなたが必要とすることすべてです。

<a href="#" id="my_link">Click Me</a>

<script type="text/javascript">
  window.onload = function(){
    document.getElementById('my_link').onclick = function(){
       return false;
    };
  }
</script>


...js イベント コレクションを使用

イベント コレクションは、JavaScript でイベントを設定および管理するための最良の方法です。これの主な理由は、同じ要素に複数のイベント ハンドラーを簡単に適用でき (他のハンドラーが既に存在することを知らなくても)、コードをマークアップから分離しておくことができるためです。イベントの継続を停止する原理は同様でreturn false;あり、同じ効果があります。

<a href="#" id="my_link">Click Me</a>

<script type="text/javascript">

  function click_me(){
    return false;
  }

  window.onload = function(){
    var elm = document.getElementById('my_link');
    if ( elm.attachEvent ) {
      elm.attachEvent('onclick', click_me);
    }
    else if( elm.addEventListener ) {
      elm.addEventListener('click', click_me);
    }
  }

</script>
于 2012-08-28T13:22:35.467 に答える