現在のhtmlページの中でアンカーリンクで移動させるぶんには問題ないのですが、
とくにAjaxの画像スライダーを設置していたりすると、
他のhtmlページから遷移して別のhtmlページのアンカーポイントとはズレたところに着地することがあります。
理由はそもそも遷移は正しく実行されているのですが、JavascriptやCSSが読み込まれる前に着地してしまうので、
スライドする画像がまだ並列にあって、それからひとところにまとまるので、そのような現象が起こってしまうのです。
これを回避するには、下記のようなスクリプトを書いて、
先にロードしてJavascriptやCSSを読み込ませた後にアンカーリンクが着地するようにする必要があります。
1 2 3 4 5 6 7 8 9 10 11 12 | <script> $(window).on('load', function() { var hash = window.location.hash; var position = $(hash).offset().top; function scroll(position){ $('html, body').animate({ scrollTop : position }, 100); } scroll(position); }); </script> |
アンカーポイントから、ええ塩梅に100px上にマージンをもたせています。
