jQueryを使ってページ内リンクをスムーススクロールさせる方法

jQueryを使って、ページ内リンクをスルスルっとスムーススクロールさせる方法をご紹介いたします。紹介するコードをコピペするだけで、ページ内リンクをクリックした時の移動が滑らかになります。

jQueryを使ってページ内リンクをスムーススクロールさせる方法

ページ内リンクにクラスを付与するパターン

</body>の直前に以下スクリプトを追加します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
  $(".internal").click(function(){
    $("html,body").animate({ scrollTop: $($(this).attr("href")).offset().top }, 600 ,"swing");
    return false;
  })
});
</script>

すでにjQuery本体を読み込んでいる場合は、1行目は削除してください。「600」のところは、リンク先に移動するまでの時間なので、値を小さくすると移動が速く、大きくすると移動が遅くなります。

上記を追加したうえで、a要素に.internalクラスを追加してあげます。

<a href="#target" class="internal">ページ内リンク</a>

.internalクラスが付いているページ内リンクをクリックすると、スルスルっと滑らかに移動するようになります。

すべてのページ内リンクをスムーススクロールさせるパターン

a要素にいちいちクラスを付与するのは面倒！という場合は、スクリプトを以下のようにすれば、すべてのページ内リンクがスムーススクロールするようになります。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('a[href^="#"]').on("click", function() {
  var speed = 600;
  var href = $(this).attr("href");
  var target = $(href == "#" ? "html" : href);
  var position = target.offset().top;
  $("html,body").animate({ scrollTop: position }, speed);
  return false;
});
</script>

あとがき

jquery.smoothScrollなどのプラグインを使う方法もありますが、上述した内容をコピペするだけで動作するので、プラグインを使うまでもないかもですね。参考になれば幸いです。