スムーススクロールを実装しよう

2020年5月3日2022年9月30日

htmlでidをhrefに指定して、topに戻る、というボタンを作ったとき。
するする〜っと上に動く「スムーススクロール」について解説します。今回はjQueryを使用したスムーススクロールを実装したいと思います。

書いたHTMLはこちら

<!--トップへ戻る-->
<div class="totop">
    <a href="#top">トップへ戻る</a>
</div>

jQueryってなに？

jQueryというのはJavaScriptという難しいプログラミング言語を簡単に使えるようにまとめてられているスターターキットのようなものです。

ウェブサイトを調べているとjQueryをつかって◯◯する、というハウツーが出てくるかと思いますが、その際には必ず「jQueryを読み込む」という作業を行います。

jQueryの読み込み方

https://code.jquery.com/ で、jQuery 3.xのminifiedを選択します。クリックするとコピーできる<script>タグのコードが表示されますので、それをコピー。
そして、HTMLの<head>内に（もしくはbody閉じタグの直前）にペーストします。

スムーススクロールの読み込み方

jQueryを読み込んでから、必ずその記述より下の行に、読み込んだ下側に貼り付けてください。

<script>
$(function(){
 $('a[href^="#"]').click(function() {
      var speed = 500;
      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;
   });
});
</script>

これで、リンクがスルッと動くようになったでしょうか？
参考になれば幸いです。