5

ページにタブ付きコンテンツがいくつかあり、URLにハッシュセグメントがあり、正しいタブコンテンツに移動します。異常なことは何もありません。ただし、タブはページのすぐ下にあるため、誰かがURLにハッシュターゲットを使用してアクセスすると、ページのタブビットにドロップされます。これにより、上部のナビゲーションバーとブレッドクラムが切断されます。

私はそれが起こらないようにしたい。それは方向感覚を失います。

修正するのは簡単だと思いました：次のようなものです：

$(function(){
window.scrollTo(0,0)
});

それはうまくいきません。あなたはまだハッシュアンカーに落とされます。

window.load（）で呼び出してみました。スクリプトを<head>から。の直前に移動してみました。window.scrollToとwindow.scrollを試しました。何も機能しません。実際にページの先頭に戻ることができた唯一のスクリプトは次のとおりです。

$(function(){
    setTimeout(function(){
        window.scrollTo(0,0)
    },2000);
});

...これはまったくスクロールしないよりもさらに悪いです。

なぜ他に何も機能しないのですか？私は何か間違ったことをしていますか、それともユーザーをページの先頭に戻すのを妨げている何かがありますか？

=====================編集：

例（さらにいくつかのLoremパラで埋めたい場合があります）。それを新しいHTMLファイルに保存してから、＃hash1URLに移動します。

<!doctype html>
<html lang="en">

<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<title>Load</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
/*


// doesn't work
$(function(){
    window.scrollTo(0,0);
});


// doesn't work
$(window).on('load', function(){
    window.scrollTo(0,0);
});


// doesn't work
window.scrollTo(0,0);


// works, but horrible UX.
$(function(){
    setTimeout(function(){
        window.scrollTo(0,0)
    },2000);
});



*/
</script>

</head>

<body>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p><a name="hash1"></a>Hash 1</p>


<script type="text/javascript">
    // doesn't work
    // window.scrollTo(0,0);
</script>

</body>

</html>
4

2 に答える 2

2

ブラウザは特定の条件でスクロールします（ハッシュタグ、F5を実行するときの以前のスクロール状態の復元、要素のフォーカス、またはscrollIntoViewの呼び出し）。これらすべての場合にスクロールイベントが発生するわけではありません。

残念ながら、これを回避するための信頼できる方法は見つかりませんでした。

まず、ウィンドウでスクロールイベントを監視し、イベントをキャンセルできるかどうかを確認することをお勧めします。

うまくいかない場合は、アンカーを上に移動するか、単に削除する以外に解決策はありません。

于 2013-01-08T10:48:05.903 に答える
0

->あなたのjquery関数はおそらく呼び出されていませんonLoadは簡単なコード例を投稿できます->jqueryの代わりにjavascriptを使用この関数はhtmlファイルのロード時に指定された場所にスクロールします。

<html>
<head>
  <script>
  function windowscroll(yscroll,scrollspeed){
  //alert('hi');
  window.scrollBy(0,-9000);//initial scroll to the top of the page
  for (var iscroll=0;iscroll<yscroll;iscroll++){
    setTimeout('window.scrollBy(0,' + iscroll + ')',scrollspeed*iscroll);
  }
  }
  </script>
  </head>
  <body onLoad="windowscroll(0,0)">
  <div>
  Click here</div>
 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 <br/><br/><br/>asdasd asdasf sdfgsdf<br/><br/><br/><br/>
 <br/><br/><br/><br/><br/><br/>zxd<br/><br/><br/><br/><br/>

 zxc dsf sdf asdf
 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 <br/><br/><br/><br/><br/><br/>
 <br/>dasfsdf<br/><br/>
 </body>
</html>
于 2013-01-08T11:09:02.973 に答える