【JavaScript】jsで簡単にスムーズスクロールさせる方法

今回は、jsの小ネタです。
jsで簡単にスムーズスクロールさせる方法をご紹介します。

スムーズスクロールとは

スムーズスクロールとは、ページ内をスルスル〜っと該当の箇所にスクロールするものです。
ページが長いときなど、スクロールが大変なので、良く実装することが多いです。

スムーズスクロールを実装していない場合、リンクボタンを押すと該当の箇所にパッと移動します。
これだと、ページのどこに移動したのかわからず、ページのボリューム感もわかりません。

スルスル〜っとスクロールすることで、感覚的にボリューム感が分かるので、ユーザビリティが良いと言われています。

スムーズスクロールのスクリプト

では早速、スムーズスクロールのスクリプトをご紹介します。

// スムーズスクロール
$(function(){
    // #で始まるアンカーをクリックした場合に処理
    $('a[href^=#]').click(function() {
        var speed = 400;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.get( 0 ).offsetTop;
        var zoom = $('html').css('zoom');
        if ((navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') > 0) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
            $('body,html').animate({scrollTop:position * zoom}, speed, 'swing');
        } else if (navigator.userAgent.indexOf("Firefox") != -1) {
            // firefoxは時間が無いのでスクロールの処理を切る
        } else {
            $('body,html').animate({scrollTop:position}, speed, 'swing');
        }
        location.href = href;
        return false;
    });
});

このスクリプトを、外部のjsファイルにコピーして、htmlから読み込ませます。
これだけでスムーズスクロールができるようになります。

最後に

以上、jsで簡単にスムーズスクロールさせる方法をご紹介しました。

他にも小ネタがあれば今後ご紹介します。