[jQuery]特定のリンクを除外しつつページ内スクロール【2017/03/29追記】

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

基本形

とりあえず一般的なページ内スクロールのjs。
[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;
});
});
[/js]
全てのページ内リンクに適用される。

特定のリンクを除外する

[js]
$(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;
});
});
[/js]
この場合、「#hoge」ってなってるaタグに関してはスクロール処理をしない。

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

[js]
$(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;
});
});
[/js]
こうすると「#hoge」と「#hogehoge」が除外される。

まあ

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

追記:2017/03/29

いちいちリンク先で指定してると毎度jsに手を入れなきゃいけないので、class指定してそいつを除外してあげると後が楽。
[js]
$(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;
});
});
[/js]
こうすれば「.notscroll」なaタグが除外される。

追記:2018/10/19

[js]
$(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;
});
});
[/js]
jQueryの高バージョンになると動作しないけど、最初のところの「#」を「”#”」にすれば使える。
notもこっちのほうがいいかもしんない。

コメント

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

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