シンプルで軽量なスムーズスクロールのライブラリ「Jump.js」を使ってみたので紹介しよう。
Jump.js
DEMOサイトのかわいいロボットが印象的。
このライブラリはnpmで配信されているスムーズスクロールライブラリ。
内部ではrequestAnimationFrame を使って実装されているため負荷が少ない。
ファイルを圧縮した状態で2.67KBと軽量。
npmで配信されているが、Githubからダウンロードしても使用可能。
インストール
npm
$ npm install jump.js --save
<script src="jump.min.js"></script>
インスタンス化
var Jump = new Jump();
ES6で使う場合
// import Jump
import Jump from 'jump.js'
// create an instance
const Jump = new Jump()
使い方
必ず2つのパラメータを指定する。
Jump.jump(target, option)
Jump.jump('.selector', { duration: 500 });
targetはCSSセレクタで要素の指定することでそこまでスクロールする。
数値を指定すればその分だけスクロールする。optionは次のとおり。
option
- duration (require) [int, function] : スクロールの時間。
- offset [int] : スクロール完了後の位置のオフセット量をピクセルで。
targetをCSSセレクタで指定した場合のみ。 - callback [function] : スクロール完了後のコールバック関数。
- easing [function] : イージング関数を指定。
使用例
<!-- html -->
<a href="#target">scroll</a>
<div id="target">ここまでスクロール</div>
// JavaScript
var a = document.getElementsByTagName('a');
a.addEventListener('click', function(e) {
e.preventDefault();
Jump.jump('#target', {
duration: 500
});
});
// jQuery
$('a[href^=#]').on('click', null, function(e) {
e.preventDefault();
Jump.jump('#target', {
duration: 500
});
});
まとめ
このブログのスクロールボタンでも適用してみた。
リンクごとにスクロールの挙動を変えられるので柔軟に対応できる。
まずはお試しあれ。