【ページ内リンク】スムーススクロールを実装できるsmooth-scroll.js使い方

スムーススクロールを実装できるsmooth-scroll.js使い方

まずは以下がダウンロードリンクと公式デモです。

• ダウンロード（GitHub）
• 公式デモ

このライブラリはjQuery不要です。

読み込み方法

読み込みはscriptタグとNPMの2種類ご紹介します。

scriptタグの場合

ダウンロードしたファイルを設置

ダウンロード（GitHub）ページより
Clone or download → Download ZIP
とクリックしてダウンロードします。

解答して出てきたファイルの
dist → smooth-scroll.js
を任意のディレクトリに配置して読み込みます。

html
<script src="path/to/smooth-scroll.js"></script>

CDN

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

NPMの場合

ターミナル
npm install smooth-scroll

javascript
import smoothScroll from 'smooth-scroll';

ページ内リンク設定（HTML）

以下のようにhtmlにリンクとリンク先を記述

html
<a href="#link">リンク</a>

<p id="link">リンク先</p>

実行

以下をコピペで動きます。
すべてのページ内リンクに適用されます。

javascript
let options = { 
  speed: 300,//1000px進むスピード
  easing: 'easeInOutCubic',//イージング
  offset: 50//停止位置
};

let scroll = new smoothScroll('a[href*="#"]', options);

オプションは他にも色々ありますが、僕は上記の
speed, easing, offset
の3つしか使っていません。
これだけで特に不便などは無いです。

画面幅でoffsetを変更

スマホ時にヘッダーが固定の場合に使用します。
以下は1024px以下のときに50pxずらして停止します。

javascript
let options = { 
  offset: window.innerWidth >= 1024 ? 0 : 50
};

固定ヘッダー用のオプションは用意されているのですが僕はこれで調整しています。

最後に

以上でsmooth-scroll.jsの紹介は終わりです。
ここで紹介した機能は最低限のものです。他にもイベントなど機能はたくさんあるので調べてみてはいかがでしょうか？
smooth-scroll.jsはスムーススクロールを実装できるライブラリで一番使いやすと個人的には思います。

以下の記事ではsmooth-scroll.jsを使用しています。

スクロール位置でナビのカレント状態が変化するJS【ページ内リンク】

縦長のページでよくスクロールすると位置でナビゲーションの状態が変化するサイトをみたことがありませんか？状態としてはページの現在地を知らせるためのUIが多いですね。この記事ではそのJSの作り方をご紹介します！