18

HTML ページでは、次のようなリンク:

<a href="#pagelocation">Location on Page</a>

...ページの次の場所に移動する必要があります。

<a name="pagelocation">

しかし、私の経験では、特に別のページ ( など<a href="somepage.html#pagelocation">) からリンクしている場合は、見逃されることがあります。「ミス」とは、ページの間違った場所にスクロールすることを意味します - 近いかもしれませんし、そうでないかもしれません。

通常、ターゲットの場所は画面の上部になります。アンカーの下に画面の上部までスクロールするのに十分なスペースがない場合、これが失敗する可能性があることはわかっています。

他になぜ失敗するのでしょうか？それはレイアウトにまったく依存しますか？どうすれば修正できますか？

（キャッチオールリファレンスの回答が欲しいので、この一般的なままにしています。）

更新 1

明示的でない画像サイズについて、これまで指摘していただきありがとうございます。しかし、すべての要素に明示的なサイズがあるページではどうでしょうか? （私は今1つを扱っています。）

4

7 に答える 7

18

ページの読み込みが完了する前にスクロールが発生することがよくあります。幅と高さのない画像がある場合、ページがジャンプしてから画像を読み込んで再レイアウトするため、以前にジャンプした場所が間違っているように見えます。

編集: ページ レイアウトを変更できる他のものも疑いを持って検討する必要があります...これには、読み込まれていない JavaScript と CSS が含まれます<head>(すべての CSSをヘッドに読み込む必要があることに注意してください。常にそうであるとは限りません)。

ページがリダイレクトによってバウンスされた場合、IE は最終ページをスクロールすると思いますが、Firefox はスクロールしません。

于 2009-01-06T14:52:29.873 に答える
7

JS ソリューション

ドキュメントの準備ができたら、この関数を実行します。

 function goToAnchor() { 
    hash = document.location.hash;
    if (hash !="") {
        setTimeout(function() {
            if (location.hash) {
                window.scrollTo(0, 0);
                window.location.href = hash;
            }
        }, 1);
    }
    else {
        return false;
    }
}
于 2014-03-03T11:38:24.807 に答える
5

表示されている動作は、すべての画像の読み込みが完了する前にブラウザがページ上のその場所に移動した結果だと思います。画像の読み込みが完了すると、ページのレイアウトが変更され (たとえば、ページが縦方向に長くなる可能性が高い)、アンカーがあるべき場所が変更されますが、ブラウザーはまだその場所に既に移動していると認識します。アンカー。

于 2009-01-06T14:51:07.600 に答える
2

また、JavaScriptがページの上部にドロップダウンメニューを作成するときにこれが発生することも確認しました。次に、メニューが終了すると、メニューは非表示になり、下のコンテンツを上にスクロールします。

その間、ブラウザはすでにウィンドウの上部にターゲットの場所を設定しています。ページの最上部にあるメニューを非表示にすると、ターゲットの場所がウィンドウの最上部から上に移動します。

于 2009-10-29T21:20:36.210 に答える
2

前述のように、これはおそらく画像のレンダリングが遅く、読み込み時にレイアウトが「調整」されているためです。

画像のサイズを指定できる場合は、レンダリングする前にそれだけのスペースを割り当てることができるため、問題を防ぐことができます。

補足として、画像のリロードが必要なページ間で前方/後方を使用するという形で、以前にこの問題が発生したため、レンダリング後に間違った場所に移動してしまいました。

于 2009-01-06T15:37:18.863 に答える
1

id="pagelocation"同じ結果を得るために、ほぼすべてのHTML要素に追加できることに注意してください。これにより、リンク先のアンカーを追加する手間が省けます。

于 2009-01-06T15:15:34.040 に答える