【smooth-scroll】アンカーリンクをスムーススクロールさせるjavascriptライブラリ

javascript(vanilla JS)でアンカーリンク(ページ内リンク)をスムーススクロールさせるsmooth-scrollライブラリをご紹介します。CDN経由で読み込み、リンクタグにdata-scroll属性を追加するだけでアンカーリンクまでぬるぬるスクロールされます。

smooth-scrollライブラリの公式github

詳細な情報は以下の公式サイトをご参照ください。

cferdinandi / smooth-scroll （https://github.com/cferdinandi/smooth-scroll）

smooth-scrollライブラリの使い方

ライブラリをCDNを読み込みます

CDN経由でsmooth-scrollライブラリを読み込んでいきます。公式サイトにnpm経由でインストールする方法もあります。

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

body末尾でSmoothScrollプログラムを起動します。

bodyタグの末尾に以下の記述をしてスムーススクロールを起動させていきます。

<script>
    var scroll = new SmoothScroll('a[href*="#"]');
</script>コピー

アンカーリンクにdata-scroll属性をつけていきます。

あとは、スムーススクロールさせたいアンカーリンクに対してdata-scrollを追加してあげればOKです。

<a href="#contact" data-scroll>お問い合わせ</a>コピー

カスタマイズ方法について

固定ヘッダーの高さだけスクロール位置をずらす

ヘッダーにposition: fixed; がついているとヘッダーの高さだけコンテンツが隠れてしまう場合がありますが、その時は以下のコードに変更した上でヘッダーにdata-scroll-header属性をつけてあげることで、ヘッダーの高さを考慮してスクロール位置を自動で調整してくれます。便利！

<script>
	var scroll = new SmoothScroll('a[href*="#"]',{
		header: '[data-scroll-header]'
	});
</script>コピー

その他のカスタマイズはgithubのドキュメントをご覧ください

その他、スクロールスピードやイージングのカスタマイズ、スクロールに応じたイベントなど各種APIでカスタマイズすることもできます。詳細はgithubのドキュメントを参照してください。