新しくなったsmooth-scroll.jsを使ってみたら本気で使いやすいライブラリになってた

0
新しくなったsmooth-scroll.jsを使ってみたら本気で使いやすいライブラリになってた

以前、というか2年前に紹介したスムーススクロールのライブラリがバージョン新たに登場していましたので、こちらをご紹介します。

知らない間に格段に使いやすくなったsmooth-scroll.jsですよ。




とりあえずデモ

とりあえずデモです。

See the Pen
Smooth Scroll Easing Patterns by Chris Ferdinandi (@cferdinandi)
on CodePen.

とりあえず使い方

以前はダウンロードして自分のサーバーから呼び出して使っていましたが、CloudflareのCDNが利用できるようになっていたのでそちらを使います。

お約束のように<head>にライブラリを読み込みます。

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

CDNが使えない環境や「Cloudflareってなんだ？CDNってなんだ？こぇーからダウンロードして使いたいべ！」という方がいらっしゃいましたら、Githubからダウンロードして使ってみてください。

中身は同じです。

GitHub
cferdinandi/smooth-scroll
https://github.com/cferdinandi/smooth-scroll
A lightweight script to animate scrolling to anchor links. - cferdinandi/smooth-scroll

あとは</boby>の直上に実行するためのコードを書きます。

Default
1
2
3
4
5
6
7
<script>
var scroll = new SmoothScroll('a[href*="#"]', {
speedAsDuration:true,
speed:1000,
easing:'easeInOutQuint' // イージングも使えるよ！
});
</script>

最後に、ターゲットとなるaにdata-scrollを付け加えるだけで、スムーススクロールになります。

こんな感じですね。

Default
1
<a href="#" data-scroll>hoge</a>

data-scrollを付けないとスムーススクロールは実行されないので、タブの切り替えやドロワーのボタンをaでやっちゃってる場合などでもコンフリクトしないので便利ですよ。

さいごに

というわけで、なんでこんな記事を書いたかというと、最近使ったから…です。

他にはたくさんのオプションがあって、例えばfixedで固定されていたヘッダーの高さが計算されるようになっていたり、イージングが使えたり、オフセットが使えたりしますが、そんなことを長々と書いていても仕方ないので、気になったらとりあえず使ってみてください。

きっとお気に入りになるハズですよー！

製作者のGithubには詳細も載っていますので、そちらも参考にしてくださいー。

GitHub
cferdinandi/smooth-scroll
https://github.com/cferdinandi/smooth-scroll
A lightweight script to animate scrolling to anchor links. - cferdinandi/smooth-scroll

コメント

*



この記事も読まれています