バスタオルはフワフワよりゴワゴワ派、フロントエンドエンジニアのザワです。
ウェブサイトでよく見かける動きの一つ、ボタンをクリックすると、するするっと目的の位置にスクロールする動きがありますよね。TOPへ戻るボタンや、ページ内アンカーなどが代表的に見られると思います。jQuery信仰派であった時は、animate関数を使用していたものです。今回は、jQueryを使わずに簡単に実装できるJSライブラリであるjump.jsをご紹介したいと思います。
インストール
まずはライブラリをインストールしましょう！
使い方
jump(‘.target’);え、それだけ？
はい。それだけです。
第一引数には、上に挙げた例のように、セレクタを渡す他に、ノードを渡したり、現在位置からの相対値を渡すことができます。
//node
const node = document.querySelector('.target');
jump(node);
//現在位置からの相対値をピクセルで指定
jump(100);これだけでも便利さがわかっていただけたかと思いますが、もっとこだわりたいワガママさん、ご安心ください。第二引数にオプションもご用意されております。
duration
アニメーション時間をミリ秒で指定します。
jump('.target', {
duration: 1000
});offset
第一引数で指定した要素からのオフセット値をピクセルで指定できます。固定ヘッダーがある場合などに便利ですね。
jump('.target', {
offset: 0
});callback
アニメーション終了後に呼ばれるコールバック関数を指定できます。
jump('.target', {
callback: ()=>{
alert('back to top');
}
});easing
デフォルトでは、easeInOutQuadが指定されています。他のイージングを使用したい場合は、https://github.com/jaxgeller/ez.jsなどのイージングライブラリを読み込んで使用しましょう。
jump('.target', {
ease: easeInOutQuad
});a11y
アニメーション終了後、指定した要素にフォーカスを当てるかをboolean値で指定できます。
jump('.target', {
a11y: false
});その他
ブラウザサポートはrequestAnimationFrameをサポートしているブラウザであればサポートされています。ライセンスは嬉しいMITライセンスです。
デモ
冒頭に紹介した通り、公式のデモもありますが、自身でも試してみました。
トップへ戻るボタンを例に挙げてソースコードを紹介します。ボタンをクリックする部分は自分で実装し、するするっと動く部分はjump.jsにお任せします。
See the Pen jump.js by Zawa (@sowork) on CodePen.
まとめ
紹介の説明文の短さからも使いやすさが伝わるかと思います。
githubから覗き見るとわかるのですが、ソースコード自体も短いので、スムーズスクロールを自作したい！ または、ライブラリ制作を始めてみたい！ と思っている人は参考になるのではないでしょうか。私もライブラリを作成する際は、本ライブラリを見習ってシンプルを極めたい、そう思います。
シンプルイズベスト！ スムーズスクロールで原点に戻る。それでは初心を忘れずに良い制作ライフを！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
