【初心者のJavaScript】smooth-scroll.jsの使い方を解説
smooth-scroll.jsの使い方を解説/h2>
LP制作などWebサイトを構築する上で、メニューなどのリンクをクリックすると特定の場所に誘導することは多いです。
その際にイッキに移動するのではなく、スムーズにスクロールさせた方がUX的に良いと思います。
smooth-scroll.jsを使えば簡単に実装できますので、記事にしておきます。
smooth-scroll.jsとは
smooth-scroll.jsとはJavaScriptのライブラリです。
ヘッダーメニューをクリックして、特定の場所に誘導する際にスムーズな動きを実現してくれます。
smooth-scroll.jsの実装方法
実装の手順は下記の通りです。
- smooth-scroll.jsをダウンロード
- JavaScriptコードを書く
簡単すぎますね。
⇨https://github.com/cferdinandi/smooth-scroll
上記アドレスからダウンロードできます。
ダウンロードが完了したら、使用するファイルをコピーしてご自身のファイルに入れてください。
使用するファイルはdistの中のsmooth-scroll.polyfills.min.jsというファイルです。
当然html側で読み込まなければなりませんので、忘れず読み込みのコードを書いておいて下さいね。
＜script src=”js/smooth-scroll.polyfills.min.js”＞＜/script＞
こんな感じで読み込めばOKです。
僕はjQueryを読み込むコードの下に書いています。
次にJavaScriptを書いていきますが、たった１行書くだけでOKです。
var scroll = new SmoothScroll(‘a[href*=”#”]’);
これで実装完了です。
初心者でも実装できますね。
ただここでひとつ問題があって、ヘッダーを固定することも多いと思うんですが、position: fixed;で固定するとヘッダーの高さ分スクロール位置がずれてしまいます。
解決方法も簡単です。
var scroll = new SmoothScroll(‘a[href*=”#”]’, {
header: ‘#header’,
speed: 1000,
});
先ほどのコードに2行ほど書き加えただけですが、これで解決できます。
header: '#header'の部分でヘッダー分の高さが考慮されるようになります。
id名は自分でつけたものを書いて下さい。
speed: 1000でスクロールする速度を設定しています。1000だと1秒でスクロールする設定ですね。
これで簡単にスムーズなスクロールを実装することができます。
ぜひ試してみてください。
関連記事【JSプラグイン】Magnific Popupを使って画像を拡大してみよう【実装方法を解説】