Smooth-scroll.jsで実現するスムーススクロール

WEB制作

ライブラリを利用してスムーススクロールを簡単導入

素晴らしいSmooth-scroll.jsライブラリ

今回はSmooth-scroll.jsライブラリを使用したスムーススクロールの導入です。

デモはこちらです。

非常に簡単かつJQueryにも依存しないので、とても使いやすいと思います。

設置方法

ライブラリをダウンロードしサイトへ設置します。

ダウンロード
GitHub Smooth-scroll.js

設置。パスは環境にあわせて書き換えてください。

<script src=”js/smooth-scroll.min.js”></script>

CDNも利用できるので、環境に合わせて選びます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/16.1.0/smooth-scroll.min.js"></script>

Smooth-scrollを初期化します。

var scroll = new SmoothScroll('a[href*="#"]');
});

使用したいアンカーリンクに「data-scroll」を付与します。

data-scrollなくても動く気が…

<a data-scroll href="#content1">リンク1</a>
<div id="content1"></div>

以上で作動すると思います。

オプションその他

固定ヘッダーにかぶらないようスクロール量を調整できたり、easingのオプションも豊富なので、すごく使い勝手が良いです。

一例としてこのように書いたりましす。

var scroll = new SmoothScroll('a[href*="#"]', {
speedAsDuration:true,
speed:1000,
easing:'easeInOutQuint',
header: '[data-scroll-header]'
});

現場で出番も多いと思うので、覚えておきたいライブラリです。