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

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>

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

Advertising

Photoshop以外も契約したいけど、高くて躊躇していませんか?
Adobe Creative Cloudを一番安く購入する方法 →1年:39,980円の詳細を見る


世界最大級のオンライン学習サイトUdemy  ※UdemyはよくSALEをしていますので、ひんぱんにチェックして、Webデザイン講座の動画をお得にGETしてくださいね♡2000〜3000円くらいで買えることも。


ロイヤリティフリーの写真素材【PIXTA】 ※画像素材は定額制プランのあるサイトを選ぶのがオススメです。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる