最終更新日 2021.09.5
Java Script / jQuery

jQueryでスムーズスクロールを実装！ページ内リンクに動きを付け加える

ホームページを作り始めた頃、リンクを付けると別のページに飛んだりしただけでも「スゲェ～」って興奮してました（笑）。

リンクは別ページだけじゃなくて、同じページ内にも付ける事ができます。でも単純にページ内リンクを付けるだけじゃ動きが「カクッカクッ」ってなっちゃうんですよねぇ。

今回ご紹介するSmoothScroll（スムーズスクロール）を使えばリンク先まで滑らかに動いてくれます。これをはじめて知った時も「スゲェ～」って興奮しました（笑）。

スムーズスクロールの記述方法

それでは簡単なので実際にやっていきましょう。

index.html

        	
                <!DOCTYPE html>
                <html>
                <head>
                <meta charset="UTF-8">
                <title>スムーズスクロールの実装</title>
                <style>
                * {
                  margin: 0;
                  padding: 0;
                  box-sizing: border-box
                }
                 
                html {
                  font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo UI", "Meiryo", "MS PGothic", sans-serif;
                  font-size: 62.5%;
                  font-feature-settings: "palt"
                }
                 
                a {
                  width: 300px;
                  color: #fff;
                  font-size: 1.7rem;
                  letter-spacing: 0.09em;
                  line-height: 60px;
                  text-align: center;
                  text-decoration: none;
                  margin: 40px auto 0;
                  background: #21c69c;
                  display: block
                }
                 
                #sample {
                  font-size: 2.8rem;
                  font-weight: 600;
                  text-align: center;
                  padding-bottom: 200px;
                  margin-top: 1000px
                }
                </style>
                </head>
                <body>
                  <a href="#sample">サンプルへ移動する</a>
                  <div id="sample">サンプル</div>
                <script type="text/javascript" src="js/jquery.min.js"></script>
                <script type="text/javascript">
                $(function(){
                  $('a[href^=#]').click(function() {
                    var speed = 600;
                    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>
                </body>
                </html>

こちらのhtmlファイルはコピペしてください。大事なのは「jquery.min.js」も読み込んでおく事です。「jQueryを使うために必要な「jquery.min.js」ファイルをダウンロードしよう」を参考にダウンロードしておいてください。

こちらも見てください

jQueryを使うために必要な「jquery.min.js」ファイルをダウンロードしよう

ちなみにファイルの階層は下記のように設置します。

ついでにページ内リンクの説明もしておきます。

        	
                <a href="#sample">サンプルへ移動する</a>
                <div id="sample">サンプル</div>

まずページ内リンクとなる箇所ですが、このリンクは「アンカーリンク」とも呼ばれています。リンクを付けたい箇所に「id」を付けるとその「id」がそのままアンカーとなります。

そしてリンクを設定する場合はid名の頭に「#」が付きます。CSSの指定と同じなので何となくニュアンスは理解して頂けるかと思います。

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