jquery.smoothScroll.js 微改造メモ

概要

jquery.smoothScroll.js を利用すると、簡単にスムーズなページ内スクロールが適用できますが、自分が使いやすいよう微改造をしたメモです。

配布サイト
http://2inc.org/blog/2012/02/14/1233/

微改造1：特定のClassだけに適用

そのままだと、ページ内リンクすべてにスムーズスクロールが適用されますが、FancyBox（ http://fancyapps.com/fancybox/ ）という別プラグインと競合したので、明示的に指定した Class にのみ適用するようにしました。

変更前

jquery.smoothScroll.js

$( 'a[href^="#"]' ).SmoothScroll( {
    duration : 1000,
    easing : 'easeOutQuint'
} );

変更後（smooth というClassに適用）

jquery.smoothScroll.js

$( '.smooth' ).SmoothScroll( {
    duration : 1000,
    easing : 'easeOutQuint'
} );

微改造2：URLに #hoge がつかないようにする

デフォルトだと、スクロール後、URLが自動的に、/hoge.html から /hoge.html#hoge と変わります。これが変わらないようにしました。

変更前

jquery.smoothScroll.js

targetBody.animate(
    {
        scrollTop: offset.top
    },
    params.duration,
    params.easing,
    function() {
        location.hash = targetHash;
    }
);

変更後（ハッシュ付与部分コメントアウト）

jquery.smoothScroll.js

targetBody.animate(
    {
        scrollTop: offset.top
    },
    params.duration,
    params.easing,
    function() {
        //location.hash = targetHash;
    }
);