Jqueryでスムーススクロール

投稿日 2018年2月11日
更新日 2018年2月14日
著者木村太一
カテゴリー jquery
カテゴリーウェブサイト制作

JavaScriptのライブラリであるjQueryでスムーススクロールを実装する方法を紹介します。

トップへ戻るやページ内リンクなどで利用範囲が広いですね。

$(function(){
//先頭に#がついたリンクがクリックされたら
 $('a[href^="#"])').click(function(){
//スクロール速度　単位ミリ秒
 var speed = 800;
// アンカーの値取得
 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;
 });
});

これで、#で始まるリンクをクリックすると指定したidの要素までスクロールします。

WordPressだと「$」が競合するので、「$」の部分を「jQuery」にしましょう。
（$(function()→jQuery(function()）

スクロールする位置を調整

$(function(){
//先頭に#がついたリンクがクリックされたら
 $('a[href^="#"])').click(function(){
//スクロール速度　単位ミリ秒
 var speed = 800;
// アンカーの値取得
 var href= $(this).attr("href");
 var target = $(href == "#" || href == "" ? 'html' : href);
 // 移動先を取得
 var position = target.offset().top - 120; 
 $("html, body").animate({scrollTop:position}, speed, "swing");
 return false;
 });
});

var position = target.offset().top – 120; でスクロールする位置を調整します。
追従するヘッダー等を設定している場合は設定しないと要素が隠れてしまうことがあります。

特定のリンクを除外する

スライダーやドロワーメニュー等が挙動がおかしくなってしまう事があるので、特定のIDを除外する方法も覚えておきましょう。

$(function(){
//先頭に#がついたリンクがクリックされたら
 $('a[href^="#"]:not(a[href="#noscroll"])').click(function(){
//スクロール速度　単位ミリ秒
 var speed = 800;
// アンカーの値取得
 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;
 });
});

:not(a[href=”#noscroll”]を追加する。

この場合、「#noscroll」となっているaタグはスクロール処理しない

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

$(function(){
//先頭に#がついたリンクがクリックされたら
 $('a[href^="#"]:not(a[href="#noscroll_1"],a[href="#noscroll_2"])').click(function(){
//スクロール速度　単位ミリ秒
 var speed = 800;
// アンカーの値取得
 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;
 });
});

:notに複数条件を設定する。
この方法だと、除外するIDが増えるたびに追加する必要があり、面倒です・・
それで次の方法です。

特定のリンクを除外する・クラスで指定


$(function(){
//先頭に#がついたリンクがクリックされたら
 $('a[href^="#"]:not(a.noscroll))').click(function(){
//スクロール速度　単位ミリ秒
 var speed = 800;
// アンカーの値取得
 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;
 });
});

上記のように:not(a.noscroll)を追加してclass指定してしまえば楽ですね。必要に応じてIDとclass複合的にしてしまってもいいかと思います。

これで自由自在にスクロールできますね。

では、また。