ライブラリを利用してスムーススクロールを簡単導入
目次
素晴らしい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]'
});現場で出番も多いと思うので、覚えておきたいライブラリです。