ブラウザリロード時にスクロールをページトップにもってくる方法

縦幅の長い、縦スクロールが発生するようなサイトを閲覧しているときにブラウザをリロードすると、画面はページのトップではなく、リロード前の位置で再読み込みされます。

未確認ですが、ここ1年の間での最新のブラウザに機能として追加されたようです。
とりあえず、現時点での最新のブラウザ、IE9、GoogleChrome18、Firefox11で、この動作を確認することができます。

スクロールした後にリロードした場合にも「読んでいたところを再表示する」という親切な機能かもしれませんが、逆に困ることもあります。
例えば最近ではパララックス効果など、意図的に縦長サイトをFlashのようなリッチコンテンツ風に構築されたサイトがあります。オープニングなどの演出で、初期表示は必ずトップを見てほしいという場合です。

JavaScriptでリロード時にトップにくるようにする

リロード時にページトップにくるようにする方法が以下のサイトで紹介されていました。
リロードしたときにjQueryでページの先頭にスクロールさせる方法: 小粋空間
jQueryをベースに、オンロード時に以下のJSを実行すると、問題を解消することができます。

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

それでもページトップにいかない場合

稀にですが、上記のスクリプトを組み込んでもページトップに行かない場合があります。
その場合の対策として、このスクリプトを実行するタイミングを変えてみます。

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

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

別途スクリプトを実行している場合は、その前後に配置してみて試すと改善する場合があります。

改善する、しないの違いを

リロード後に元の高さを表示するこの機能を観察してみます。

スペックの良いPCでは処理が速すぎで分からないかもしれませんが、各ブラウザのこの機能、リロードすると一瞬だけページトップが表示され、その後にカクっと元の位置にスクロールが移動します。

サーバからのレスポンスによるコンテンツの高さ、また、閲覧しているユーザのブラウザ環境・画面のサイズによって、スクロールが表示する・しないと、スクロールの長さが決定します。つまり、全てが読み込まれるまで、スクロールの位置というのは決定できないわけです。

一方、JavaScriptの処理速度はブラウザの性能、PCの性能に依存し、その速度は環境によって異なります。

推測ですが、リロード時に元のスクロール位置に戻るか、JSでページトップにいくかどうかとう問題は、ブラウザが位置を決定する処理とJSの処理、どちらが後に実行されるかで決定されるのではないかと思います。
そして、どの処理が後に実行されるかというのは、ブラウザやPCなどの環境、しいてはメモリの状態などによって決まるのではないでしょうか。

実際に、ほとんど同じ環境の異なるPCで同じサイトで検証したのですが、一方ではページのトップにいきましたが、もう一方ではいきませんでした。どうも、どちらが先に実行されるかということは保障できないようです。

参考にさせていただいたスクリプトはほとんどの環境で有効なのですが、100パーセントの環境を対応できるわけではないようなので、クライアントに絶対的な対策方法として謳うのは控えたほうがいいかもしれません。

※今回の内容はあくまでローカルで検証した結果であり、JSやブラウザの仕様などの裏付けはありません。間違いなどがあればご教授いただけると幸いです！