Written by Kasumi

スムーズスクロール機能を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を使うやり方をお勧めします。

以上で解説を終わります。

目次

関連記事

jQuery

[jQuery]デバイス幅(PC・スマホ)で条件分岐する方法【簡単】

更新日:2022.09.09
424
jQuery

【簡単】jQueryを使って、入力中の値をリアルタイムでチェック・取得する方法

更新日:2022.09.09
1380
jQuery

【簡単jQuery】radioボタンのcheckedを取得し、value値によってイベントを発火する方法。

更新日:2022.09.09
2476
jQuery

jqueryを使って、パラメーターを追加・付与し、条件分岐する方法

更新日:2022.09.09
883