小粋空間  -  a cheap joke and a play on words site

リロードしたときにjQueryでページの先頭にスクロールさせる方法

ページをリロードしたときに、jQueryでページの先頭にスクロールさせる方法を紹介します。

リンクをクリックしてページの先頭にスクロールさせる方法はネット色々出てきますが、リロードのタイミングでスクロール（＝要はページの先頭を表示）させる手段がみつかりませんでした。

別の実験を行っていてこのような動作を行いたいケースが発生したため、少し調べてみました。認識誤りな点がありましたらご指摘ください。

１．JavaScriptのscrollTo()を使ったスクロール

まず、JavaScriptのscrollTo()を使って次のようなコードを記述してみましたが、正常に動作しませんでした。

window.onload = function(){
    window.scrollTo(0,0);
}

動作結果は次の通りです。

• Firefox：ページトップに移動するが、スクロールバーは戻らない
• Chrome：ページトップに移動しない（挙動としては一旦トップに戻って、またもとの位置にスクロールされる）
• IE9：ページトップに移動しない（〃）

２．jQueryのscrollTop()を使ったスクロール

次に、jQueryのscrollTop()を使って次のようなコードを記述してみましたが、こちらも正常に動作しませんでした。

$(function() {
    var pos = $('html,body').scrollTop();
    $('html,body').scrollTop(-pos);
});

• Firefox：ページトップに移動するが、スクロールバーは戻らない
• Chrome：ページトップに移動しない（少し戻るがトップまで戻らない」）
• IE9：ページトップに移動しない

３．jQueryのanimate()を使ったスクロール

最後にjQueryのanimate()で次のようなコードを書いてみたところ、とりあえずどのブラウザでもトップに戻ることができました。

$(function() {
    $('html,body').animate({ scrollTop: 0 }, '1');
});

animateの第2パラメータ（duration）を「'1'」としている理由は、「0」では動作しない（jQueryの仕様？）ということと、クォーテーションで括らないとIE9で正常に動作しないためです。また、firefoxはスクロール動作が遅いようです。

以上です。スクロールにこだわった実験ですが、観点がそもそも間違っていて「こうすればリロード前のスクロール状態がクリアできる」という方法があるかもしれません。あしからず。