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

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

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

コードペンを使ったサンプル実装例

実装したがスムーズスクロールされない場合

まとめ

関連記事