[jQuery]特定のリンクを除外しつつページ内スクロール

jQueryの兼ね合いで、ページ内スクロールが原因で動作がおかしくなった時の対処法。

基本形

とりあえず一般的なページ内スクロールのjs。

$(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;
    });
});

全てのページ内リンクに適用される。

特定のリンクを除外する

$(function(){
    $('a[href^=#]:not(a[href=#hoge])').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;
    });
});

この場合、「#hoge」ってなってるaタグに関してはスクロール処理をしない。

特定のリンクを除外する・複数形

$(function(){
    $('a[href^=#]:not(a[href=#hoge]),a[href=#hogehoge])').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;
    });
});

こうすると「#hoge」と「#hogehoge」が除外される。

まあ

ドロワーメニューの挙動がおかしくなったので必要にかられたわけです。
ちなみに使ったのはこれ
もっと凝ったやつもあるけどなかなかいい感じ。

追記:2017/03/29

いちいちリンク先で指定してると毎度jsに手を入れなきゃいけないので、class指定してそいつを除外してあげると後が楽。

$(function(){
    $('a[href^=#]:not(a.notscroll)').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;
    });
});

こうすれば「.notscroll」なaタグが除外される。

追記:2018/10/19

$(function(){
    $('a[href^="#"]').not('a.notscroll').not('a.damedayo').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;
    });
});

最初のところの「#」を「”#”」にすればjQuery3でも使える。
notもこっちのほうがいいかもしんない。

コメント

  1. […] スムーススクロール(除外するものをnotに)特定のリンクをスムーススクロールさせないように除外させる[jQuery]特定のリンクを除外しつつページ内スクロール【2017/03/29追記】 […]

タイトルとURLをコピーしました