JavaScript ページトップへスクロールしながら戻る

色々なサイトでよく見る『スクロールしながらページトップに戻る方法』を2つ紹介したいと思います。

▼『jQuery』を使用したページトップへ戻る

『jQuery』を使用すると、簡単に『スクロールしながらページトップ』を実現することができます。
以下がソースコードです。

▼HTML

<a href="#top" id="jPageUp">ページトップへ戻る</a>

▼JavaScript

$(function(){
    // jQueryアニメーションでページトップに戻る
    $("#jPageUp").click(function(){
        jPageTop();

        return false;
    });
})

// jQueryアニメーションでページトップ
function jPageTop() {
    $('html,body').animate({
        scrollTop: 0,
        scrollLeft: 0
    }, 'normal');
}

jQueryのアニメーション効果を作成する『animate』関数を使用し、スクロール位置を0に戻す感じですね。
クリックイベントハンドラの最後にある『return false』は、アンカー名がつかないようにするだけなので、好みで削除してもかまいません。


▼『jQuery』を使用しないでページトップへ戻る

『jQuery』を使用しない場合、当たり前の事ですが、自前で計算してスクロール位置を0に戻すことになります。
以下がソースコードです。

▼HTML

<a href="#top" id="pageUp">ページトップへ戻る</a>

▼JavaScript

window.onload = function(){
    document.getElementById('pageUp').onclick = function(){
        pageTop();

        return false;
    };
};

// 計算でページスクロールを0に戻す
function pageTop() {
    var top  = Math.floor(document.documentElement.scrollTop || document.body.scrollTop);
    var left = Math.floor(document.documentElement.scrollLeft || document.body.scrollLeft);

    if(top > 0 || left > 0) {
        document.documentElement.scrollTop  = top / 1.25;
        document.documentElement.scrollLeft = left / 1.25;

        setTimeout("pageTop()", 20);
    }
}

スクロール位置を取得して、0になるまで『setTimeout』で割り算を続ける感じです。
重要なのは、『return false』をクリックイベントハンドラの最後に書くことで、<a>要素のリンクとしての処理を停止させることです。
『jQuery』を使用しないで『return false』をクリックイベントハンドラに書かないと、リンクとしての処理も同時に開始することになり、思い通りの動きになりません。


以上が、『スクロールしながらページトップに戻る方法』です。

機会があれば、『jQuery』の『easing』関数を使った色々な『ページトップへスクロールしながら戻る』を紹介したいな~。

コメントは受け付けていません。