スムーズスクロール機能をjavascript(jquery)を使用し実装する方法

スムーズスクロール機能をサイトに使用したいけど、どうやって実装するの?
実装したがスムーズスクロールが効かない?
上記のような疑問に回答します。
本記事ではjavascript(jquery)を使って、スムーズスクロール機能を実装するやり方について解説します!
※今回はjqueryを使うんで事前にjqueryをソースに読み込ませましょう。
CDNで読ませる場合下記をhead内などにコピペ⬇️
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
コードペンを使ったサンプル実装例
See the Pen ページ内スクロール by Kohei (@kouk05) on CodePen.
上記は、コードペンを使ったサンプルです。ボタンを押してもらうと、スムーズスクロールされているのがわかります。
コードペンのJSタブを押してもらうとソースが出てきます。
自分のソースファイル内のscript内にコピペしましょう。
詳細としては以下になります。
$('a[href^="#"]').click(function() {}
aタグ(href=”#”)となっているものをクリックしたらという関数を書く。
var target = $(href == "#" || href == "" ? 'html' : href);
html内でaタグリンク内に#があるものを宣言
var position = target.offset().top;
次に先ほど宣言したtargetからトップまでの距離を宣言。
$('body,html').animate({scrollTop:position}, speed, 'swing');
あとはスクロール位置を取得するscrollTopメソッドと、アニメーションさせるanimateメソッドを使ってtargetからtopまでの距離をスムーズにスクロールさせる記述を追加。
上記仕組みでスムーズスクロールをサイトに実装できます。
実装したがスムーズスクロールされない場合
先ほどのコードを実装したがスムーズスクロールされない場合、実装されているjqueryのバージョンが違う可能性があります。
ちなみに先ほどの実装例ではjqueryバーション2系・3系を使ってる場合です。
jquery1系を使用してる場合は以下ソースをコピペして試してみましょう。
//jquery1系列のみ下記
$(function(){
// #で始まるアンカーをクリックした場合に処理
$('a[href^=#]').click(function() {
// スクロールの速度
var speed = 400; // ミリ秒
// アンカーの値取得
var href= $(this).attr("href");
// 移動先を取得
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先を数値で取得
var position = target.offset().top;
// スムーススクロール
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
変更点としては、上記ソース内の以下部分が変わっております。
$('a[href^=#]').click(function() {}
#を””で囲うか囲わないかの違いです。
どうやらjqueryのバージョンによっては文法解釈が違うようなです。
スムーズスクロールが動かない場合は確認してみてください!
まとめ
スムーズスクロールを実装できましたでしょうか?
最近ではCSSのみでスムーズスクロールを実装できる方法がありますが、IEブラウザで非対応など、難点がありますので、jqueryを使うやり方をお勧めします。
以上で解説を終わります。