Web事業部実績紹介
Web事業部実績紹介
2018.03.17
#134
それいけ!フロントエンド

Topへ戻ろう!シンプルなスムーズスクロールJSライブラリ、jump.jsをご紹介!

ザワ

バスタオルはフワフワよりゴワゴワ派、フロントエンドエンジニアのザワです。

ウェブサイトでよく見かける動きの一つ、ボタンをクリックすると、するするっと目的の位置にスクロールする動きがありますよね。TOPへ戻るボタンや、ページ内アンカーなどが代表的に見られると思います。jQuery信仰派であった時は、animate関数を使用していたものです。今回は、jQueryを使わずに簡単に実装できるJSライブラリであるjump.jsをご紹介したいと思います。

 

インストール

jump.js

まずはライブラリをインストールしましょう!

github
Demo

使い方

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から覗き見るとわかるのですが、ソースコード自体も短いので、スムーズスクロールを自作したい! または、ライブラリ制作を始めてみたい! と思っている人は参考になるのではないでしょうか。私もライブラリを作成する際は、本ライブラリを見習ってシンプルを極めたい、そう思います。

シンプルイズベスト! スムーズスクロールで原点に戻る。それでは初心を忘れずに良い制作ライフを!