Jump to the content

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

JavaScript

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

    まとめ

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

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×