jQueryでスムーススクロールを実装する方法【初心者向け】

プログラミング初心者向けに、jQueryでスムーススクロールを実装する方法について解説しています。Webサイトでもよく見る「トップに戻る」ような機能を手軽に作ることができるので、ぜひ自分で書いてみましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのライブラリであるjQueryでスムーススクロールを実装する方法を紹介します。

ボタンを押したら特定の場所にスクロールさせるといった機能を簡単に実装できるので、ぜひ参考にしてみてください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

目次

 

スムーススクロールとは

スムーススクロールとは、ページ内をスクロールする挙動を指します。Webページでよく、「Topに戻る」などのボタンを見ることが多いと思います。

それが、スムーススクロールという機能を使っているものです。

Webを閲覧している人を上手にWebページ内を誘導できるので、設置しておいた方が良いでしょう。

 

大石ゆかり

田島メンター!Topに戻るボタンだったり、ページ内の目次をクリックすると、ゆっくりとスクロールするサイトがあったのですが、jQueryを使用しているのでしょうか?

田島悠介

animateメソッドを工夫して使用しているんだ。

大石ゆかり

でも、位置とかどうやって取得しているんでしょうか?

田島悠介

位置を取得する書き方っていうのがあるので大丈夫だよ。さっそくスムーススクロールを実現してみよう!

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

スムーススクロールの書き方

スムーススクロールの書き方について紹介していきます。

JavaScript

$(function(){
  $('a[href^="#"]').click(function(){
    var speed = 500;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});

このように書くことで、スムースな動きを実行できます。

スクロールのスピードは「speed」を変更すれば変更できます。また、最後に「false」を返すことで、URLに影響を与えないようにしています。

jQueryのアニメタグを使用しています。WordPressだと「$」が競合するので「$」の部分を「jQuery」に変更しましょう。

 

実際に書いてみよう

実際にソースコードを書いてみましょう。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="sample.css" type="text/css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
    <!-- #リンクのスムーズスクロール -->
    <script>
      $(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;
        });
      });
    </script>
    <title>jQuery</title>
  </head>
  <body>
    <h1 id="index">目次</h1>
    <ul>
      <li><a href="#1">sample1</a></li>
      <li><a href="#2">sample2</a></li>
      <li><a href="#3">sample3</a></li>
      <li><a href="#4">sample4</a></li>
    </ul>
    <div id="1">
      <h2>sample1</h2>
      <a class="button" href="#index">Topへ</a>
    </div>
    <div id="2">
      <h2>sample2</h2>
      <a class="button" href="#index">Topへ</a>
    </div>
    <div id="3">
      <h2>sample3</h2>
      <a class="button" href="#index">Topへ</a>
      </div>
    <div id="4">
      <h2>sample4</h2>
      <a class="button" href="#index">Topへ</a>
    </div>
  </body>
</html>

CSS

div{
 height: 1000px;
}

実行結果を確認してみましょう。

スクロールの速度を変えることでカスタマイズできるので、いろいろ試してみましょう。

Webページでのスムーススクロールはどんなページでも見かけるようになりました。

ぜひ、1度動かしてみて、ご自分のコーディングするWebページにも取り込んでみてください。

 

大石ゆかり

スムーススクロールになってますね!ただ、少し難しいかな。

田島悠介

a[href^=”#”]は、#で始まるリンクをクリックした時って意味なんだ。position = target.offset().top;で数値として位置を取得してるんだよ。

大石ゆかり

移動すべき位置ってちゃんと取得できるんですねー。

田島悠介

そうそう。ブラウザも位置がわからないと移動できないからね。いきなりページ内リンク先に移動するより、スムースに移動した方がいいね!

 

[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。jQueryを使ってリッチなWebサービスを作りたい方はぜひご覧ください。