「smooth-scroll.js」を使ってページ内リンククリック時の滑らかなスクロールを実装する

: ひぐま

2020.10.07

スクロール

サイトを制作の際、ページ内リンククリック時の滑らかな画面スクロールを実装したい時

「smooth-scroll.js」を使用すると初心者の方でも簡単に設定できるのでおすすめです。

特にposition:fixedで上部に固定されたメニューがある場合はこちらのプラグインが便利です！

それではさっそく設置に必要なデータをダウンロードして使ってみましょう。

1.下記配布元サイトのダウンロードページにアクセスします。

ダウンロードページ

GitHub

2.「Code」より「Download　ZIP」をクリックしてZIPデータをダウンロードします。

3.ファイルをダウンロードしたら「dist」フォルダから、

「smooth-scroll.js」または「smooth-scroll.min.js」のどちらかを使用します。

JSをHTMLに読み込む

<head>
　<script type="text/javascript" src="common/js/smooth-scroll.js"></script>
</head>

CDNで読み込む場合

<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll@15.0.0/dist/smooth-scroll.polyfills.min.js"></script>

※この時パスを自分のファイルに合うよう変えることをお忘れなく

(うまく動かない！という場合はだいたいここで間違っています...)

下記は今回検証用に使用するHTMLです。

HTML

<main>
 <!--header-->
 <div id="header">
  <!--スマホ用ボタン-->
  <div id="navBtn">
   <p class="navToggle"><span></span><span></span><span></span></p>
  </div>
  <!--スマホ用ボタン-->
  <!--Menu-->
  <ul class="navMenu">
   <li><a href="#first">CONTENTS1</a></li>
   <li><a href="#second">CONTENTS2</a></li>
   <li><a href="#end">CONTENTS3</a></li>
  </ul>
  <!-- /Menu-->
 </div>
 <!-- /header-->
 <!--content-->
 <div id="first">CONTENTS1</div>
 <div id="second">CONTENTS2</div>
 <div id="end">CONTENTS3</div>
 <!-- /content-->
</main>

固定ヘッダーがある場合はあらかじめIDを指定してあげてください。

CSS

　main{ width:100%; z-index:-30; }
　#header { width:100%; height:46px; margin:auto 0; background:rgba(244,244,244,0.5); position:fixed; top:0; left:0; }
　#first,#second,#end{ width:100%; height:100vh; display: flex; justify-content: center; align-items: center; }
　#first{ background:#d7c3c7; }
　#second{ background:#76323f; }
　#end{ background:#c09f80; }
　.navMenu{ position:absolute; top: 0; }
　.navMenu li{ display:inline-block; text-align:center; }
　.navMenu li + li{ margin-left:50px; }
　.navMenu li a{ padding:10px; display:block; text-align:center; color:#000; text-decoration:none; }

※スマホスタイルは省略

ヘッダーを"position:fixed;"で固定しています。

4.用意が整ったら最後にjsを書きます。

スクリプト

 <script type="text/javascript">
 // ページ内リンクのみ取得
  var scroll = new SmoothScroll('a[href*="#"]', {
   speed: 300,//スクロールする速さ
   header: '#header'//固定ヘッダーがある場合
  });
 </script>

3行目でページ内リンクのみに適用されます。[#]のついたリンク(＝ページ内リンク)
4行目はどのぐらいのスピードでスクロールするかの速さになります。
配布サイトの説明によると1000pxのスクロールにかかる時間をミリ秒単位で表す数値だそうです。
それより短いスクロール距離では時間がかからず、それより長いスクロール距離の場合はその分時間がかかります。

※全ての距離に同じ時間分をかけたい場合は