ページ内リンクをスクロールでアニメーションで移動させる

URLのハッシュにページ内でつかっているid属性をつけると頭出しができます。
これを利用してaタグのhrefにid属性名をつかってページ内リンクをつくることがよくあります。
今回はJavaScriptの力をつかって、ページ内リンクの移動をアニメーションにしてみましょう。

JavaScript

(function(win, doc, $, ns) {

    "use strict";

    function ScrollButton($btnElm) {
        var $base     = $("html, body"),
            $win      = $(win),
            scroll    = {
                top  : 0,
                left : 0
            },
            href      = $btnElm.attr("href"),
            that      = this,
            MARGIN    = 0,
            SPEED     = 1;

        _init();

        function _init() {
            $btnElm.on("click", _handleScroll);
        }

        function _handleScroll() {
            var currentScrollTop = $win.scrollTop(),
                targetScrollTop  = $(href).offset().top - MARGIN,
                scrollValue      = Math.abs(currentScrollTop - targetScrollTop);

            setTimeout(function() {
                $base.animate({scrollTop: targetScrollTop}, scrollValue / SPEED);
            }, 0);

            return false;
        }
    }

    // export
    ns.ScrollButton = ScrollButton;

})(this, document, $, App);

つかいかた

(function(win, doc, $, ns) {

    "use strict";
    
    new ns.ScrollButton($("a.link"));
    
})(this, document, $, App);

こんなかんじでページ内リンクを設定したaタグのjQUeryオブジェクトを引数に渡してご利用ください。

ちょいと解説

引数にページ内リンクを設定したaタグを渡すと、クリック時にhrefにはいっている要素の高さを計測してそこまでアニメーションでスクロールしてくれます。
なのでJSを切った環境だと普通の（アニメーションしない）ページ内リンクになります。安心安全ですね。
targetScrollTopは_init内で1回測ればよいという説もありますが、対象の要素が動くかもしれないので一応毎回測るという方針にしてみました。

DEMO

以前つくったモックですが、ヘッダーのカラフルな部分をページ内リンクにしてみました。
今回は以上です。