requestAnimationFrameで実装されたスムーズスクロール「Jump.js」

シンプルで軽量なスムーズスクロールのライブラリ「Jump.js」を使ってみたので紹介しよう。

callmecavs/jump.js

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
    });
});

まとめ

このブログのスクロールボタンでも適用してみた。
リンクごとにスクロールの挙動を変えられるので柔軟に対応できる。
まずはお試しあれ。

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。 また、Udemyのプログラミング解説の講師、writer.appの自主開発や上越TechMeetupの主催などを行っています。

プロフィール

©Copyright 2022 Yohei Isokawa All Rights Reserved.