【jQuery】smooth-scroll.jsを使ってスムーススクロールを実装する
ページ内リンクをすいすい移動するスムーススクロール。jQuery自体もう下火なんじゃねって感じですが、オプションなどのバリエーションも豊富で使いやすかったので備忘録的にご紹介します。
プラグインはスクラッチをする時間を短縮できるのが最大のメリットですので、使いやすいものがあればどんどん使っていきましょう。
smooth-scroll.jsのデモページ
ウィキペディアからジュリアンアサンジの項目をパクってデモページを作成しました。
リンクをクリックするとすいすいーっと移動するはずです。
設定
何はともあれダウンロードしないと始まりませんので、プラグインをダウンロードしましょう。
https://github.com/cferdinandi/smooth-scrollにアクセスしてプラグインをダウンロードしてください。
ダウンロードした smooth-scroll-master.zip を解凍します。
ちなみにプラグインは下記のディレクトリに入っています。
|
1 |
smooth-scroll-master\docs\dist\js |
解凍するといくつかファイルが出てきますが、smooth-scroll.min.js のみ使用するので他は必要ありません。プラグインをコピーして、jsフォルダなど任意の場所へ移動しておきましょう。
次にHTMLファイルを開いて<head>から</head>に記述します。
jQueryを読み込んだあと、プラグインを読み込みます。
|
1 2 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="smooth-scroll.min.js"></script> |
</body>の直前に下記を記述します。
|
1 2 3 4 5 6 7 8 |
<script> smoothScroll.init ({ speed:1000, easing:'easeInOutQuint', updateURL: false, offset:20 }); </script> |
これで設定は完了です。
オプションとしてjQueryのeasingも設定できるので、もしスクロールに動きを付けたい場合はeasingも使いましょう。
easingはjQuery Easing Pluginからダウンロードできます。プラグインと同じようにjsフォルダなどへ移動させてHTMLファイルから読み込みましょう。
使用する場合はjQuery → easing → プラグインの順番で読み込みます。
|
1 2 3 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="jquery.easing.1.3.js"></script> <script src="smooth-scroll.min.js"></script> |
使い方
使い方は簡単で、ハイパーリンクの<a>に data-scroll を書くだけです。
|
1 |
<a href="#test" data-scroll>テスト</a> |
トラブル：ページの先頭に戻らないとき
先頭に戻るときに<body id=”top”>などbodyにidを指定している場合はエラーとなって使えません。<body>には何も書き込まず、<a>に下記のようにすることでページの先頭へ戻ります。
|
1 |
<a href="#" data-scroll>TOP</a> |
トラブル：headerなどをfixedで上部に固定しているとき
headerなどをposition:fixed;にしてるとスクロールしたときにコンテンツが被っちゃうので、その場合はoffsetのオプションを使って調節してください。
下記の場合は「オフセットを20pxにする」ということですね。
|
1 2 3 4 5 |
<script> smoothScroll.init ({ offset:20 }); </script> |
さいごに
今や腐るほどあるスムーススクロールですが、オプションも豊富で場面ごとに使いやすいので紹介しました。
簡単に使えて安定しているので、もしスムーススクロールを使う場面が出てきたら思い出してください。
![【ポケモンGO】[v0.103.2] 新技のブラストバーンが実装！そしてふしぎなアメも便利に使えるようになったよ](https://www.strobolights.tokyo/wp-content/uploads/2018/05/ec_2180-360x246.jpg)
![【ポケモンGO】[v0.101.0] 天候をフィードバックできるように！さらに検索も強化されたよ](https://www.strobolights.tokyo/wp-content/uploads/2018/04/ec_2072-360x246.jpg)
コメント