スムーズ(スムース)スクロールの実装
jQueryを使った#で始まるURLだけではなく、URLの末尾に#が含まれているようなURLでもスムーズスクロールする書き方です。
現在のページ内に#の要素があれば、ページ遷移せずにそのままスクロールします。
固定ヘッダーの高さを考慮します。
// スムーズスクロールする関数
function smoothScroll(target) {
// ヘッダーの高さを取得する
var headerHeight = $('header').outerHeight();
// htmlとbody要素をアニメーションさせて、指定された要素の位置までスクロールする
$('html, body').animate({
scrollTop: target.offset().top - headerHeight
}, 500);
}
// #を含むaタグをクリックした時にその要素までスムーズスクロールする
$('a[href*="#"]').on('click', function (e) {
// リンク先が現在のページ内のものかを判定
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
// クリックされたaタグのhref属性で指定された要素を取得する
var target = $(this.hash);
// もしtargetに対応する要素が存在しなかった場合、name属性による検索でtargetを取得する
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
// smoothScroll関数を呼び出して、スムーズスクロールを行う
smoothScroll(target);
return false;
}
}
});
// URLに#が含まれる場合、その要素までスムーズスクロールする
$(document).ready(function () {
if (window.location.hash) {
// URLの#以降の文字列で指定された要素を取得する
var target = $(window.location.hash);
if (target.length) {
// smoothScroll関数を呼び出して、スムーズスクロールを行う
smoothScroll(target);
return false;
}
}
});