スムーススクロールがズレる時

スムーススクロールがズレてしまうことがあったので備忘録です。

一般的なスムーススクロールの記述

全体としては一般的なスムーススクロールの記述を書きました。
こちらを参考にしました。

Javascript

htmlのヘッダー部分に直接表記しました。

<script type=”text/javascript”>
$(function(){
$(‘a[href^=”#”]’).click(function(){
//スクロールのスピード
var speed = 500;
//リンク元を取得
var href= $(this).attr(“href”);
//リンク先を取得
var target = $(href == “#” || href == “” ? ‘html’ : href);
//リンク先までの距離を取得
var position = target.offset().top;
//スムーススクロール
$(“html, body”).animate({scrollTop:position}, speed, “swing”);
return false;
});
});
</script>

リンクボタンhtml

<a href=”#01″>ボタン</a>

リンク先html

<div id=”01″>ここに内容</div>

<a name=””></a>の記述ではズレるので注意

リンク先のスムーススクロール終点を<a name=””></a>の記述にしてしまうと、ブラウザによってはズレが生じます。

上にあるブラウザのバーの部分が認識されず、終点を通り過ぎる表示になってしまいます。

必ずidで記述しましょう。