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

ひぐま
ひぐま

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

「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/jquery-1.12.4.min.js"></script>
 <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; top:0; left:0; background:rgba(244,244,244,0.5); position:fixed; }
#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{ display:block; padding:10px; text-align: center; color:#000; text-decoration:none; }

※スマホスタイルは省略

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

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

jQuery

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

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

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

 speedAsDuration:true

を追加すると同じ秒数でスクロールします。
5行目は固定ヘッダーがある場合にIDを記述します。

デモ

以上で作業は終わりなので早速デモページを見てみましょう。

デモページ

ヘッダーのメニューをポチポチしてみてください。
滑らかなスクロールがきちんと実装できました!

先程ヘッダーを設定したので、固定ヘッダーの高さが自動的に読み込まれており、
ページ内リンクで移動する際にありがちな「固定ヘッダーがコンテンツに被ってしまう」現象も起きていません。

万が一ヘッダーの高さが変わる修正があっても書き直さずすむので楽ちんです。