2

URL にアンカー (フラグメント) を含むページが読み込まれると、スクロールのデフォルトの動作ではなく、アンカーされた要素が画面の上部に表示されるので、中央に配置します。

以下は私が望むことを行います：

var $targetDiv = $(window.location.hash);

if ($targetDiv) {
    var $window = $(window);
    $window.scrollTop($targetDiv.offset().top - ($window.height() / 2));
}

ただし、これを document.ready で実行すると、10 回中 9 回、要素が中央ではなく上部に読み込まれます。

jsFiddle (名前<div>ではなく ID で使用していることに注意してください<a>。ただし、効果は同じでした)

#middleアンカーのあるページに移動した結果。

私が推測しなければならなかった場合、ready イベントが発生した後、ブラウザはその仕事をしていて、要素の一番上までスクロールしているようです。アンカー要素を中央に配置してページをロードする正しい方法は何ですか?

4

1 に答える 1

0

中央に配置したいアンカーへのリンクを追加し!、コードを更新して!：を削除しました。

var $targetDiv = $(window.location.hash.replace(/!/, ''));

if ($targetDiv) {
    var $window = $(window);
    $window.scrollTop($targetDiv.offset().top - ($window.height() / 2));
}

したがって、たとえば、someUrl.com/Index#!fooブラウザを参照するとは無視さ#!fooれ、ページはスクロールされるため、<div id="foo">中央に配置されます。

別の部分的な解決策は、ドキュメントの準備ができているのではなく、ウィンドウのロード時に上記のコードを実行することでした。残念ながら、ブラウザは2回スクロールします。1回はdivが上に表示され、次に中央に表示されます。

于 2012-08-27T14:41:40.303 に答える