スムーススクロールがズレてしまうことがあったので備忘録です。
一般的なスムーススクロールの記述
全体としては一般的なスムーススクロールの記述を書きました。
こちらを参考にしました。
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で記述しましょう。
