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もこっちのほうがいいかもしんない。
コメント
[…] スムーススクロール（除外するものをnotに）特定のリンクをスムーススクロールさせないように除外させる[jQuery]特定のリンクを除外しつつページ内スクロール【2017/03/29追記】 […]