jQueryを使用して、ページ内リンクをクリックしたときに、スムーズにスクロールするサンプルです。
ヘッダーが追従するようなサイトにも対応しています。
サンプルコード
1 2 3 4 5 6 7 8 9 | $(function() { var spacer = 30; $('a[href ^= "#"]').click(function() { $('html,body').animate({ scrollTop: $($(this).attr('href')).offset().top - spacer }, 300); return false; })}); |
基本的にはよくあるスムーズスクロールで、hrefの値が「#」から始まるリンクをクリックしたときに実行されます。
そのため、index.htmlページで「href=”index.html#block02″」のような
「#」から始まらないページ内リンクをクリックしたときには実行されません。
spacerの部分でヘッダー分の高さを指定して、ページ内リンクの位置をヘッダーの高さ分下にずらすようにしています。
spacerの値を自動で取得したい場合は、
1 | var spacer = $('#header').outerHeight(); |
のようにすれば取得できます。
コメントが承認されるまで時間がかかります。