[jQuery] 絶対パス指定のリンクでスムーススクロールしたい

公開日:2019/11/09 更新日:2019/11/17

ページ内リンクの位置にスルスルと移動するスムーススクロールですが、定番のサンプルとして以下のようなコードがよく使用されます

jQuery(function($) {
    $('a[href^=#]').click(function(){
        var speed = 500;
        var href= $(this).attr('href');
        var target = $(href == '#' || href == '' ? 'html' : href);
        if( target.size() < 1 ) return true;
        var position = target.offset().top;
        $('html, body').animate({scrollTop:position}, speed, 'swing');
        return false;
    });
});

このコードの場合、絶対パス形式のリンク（例：https://xxx.com/yyy/#section01）では動作しません
ナビゲーションメニューに「#」を含めたリンクを置きたい場合などに不都合が出てしまいます
そこで、絶対パス形式でもスムーススクロールが動作するようなコードを検討してみました

サンプルコード

jQuery(function($) {
    $('a[href*=#]').click(function(){
        var speed = 500;
        var href= $(this).attr('href');
        var url = location.protocol + '//' + location.hostname + location.pathname;
        href = href.replace(url, '');
        var target = $(href == '#' || href == '' ? 'html' : href);
        if( target.size() < 1 ) return true;
        var position = target.offset().top;
        $('html, body').animate({scrollTop:position}, speed, 'swing');
        return false;
    });
});

補足・解説・仕組み

$('a[href*=#]').click(function(){
    〜
}

「#」から始まるアドレスのaタグではなく「#」が含まれるアドレスのaタグがクリックされたときに処理が行われるようにしています

var url = location.protocol + '//' + location.hostname + location.pathname;
href = href.replace(url, '');

変数hrefに格納したスクロール先となるアドレスを加工して「#」以降の部分だけを取得します
「#」が含まれたアドレスに対して、「#」が含まれないアドレスを空白に置換することで「#」以降の部分だけを残します

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。