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

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

Ads

関連記事

JavaScript プログラミング

【簡単】スマホでよくある横スライドメニューを実装する方法【jQuery・CSS使用】

2022.02.14
250
WordPress プログラミング

Yoast SEOのschema(スキーマ)設定を無効化する方法

2022.04.03
71
JavaScript プログラミング

【簡単】videoタグの再生速度を調整(早く・遅く)する方法

2022.03.11
202
JavaScript プログラミング

【jQuery】途中からヘッダー、ナビ、サイドバー等を追従させる方法【簡単】

2020.03.28
254