【jQuery】縦長のサイトを読み込んだときの表示位置をページトップにする

Ads by Google

特にスマートフォン対応サイトなどで、縦スクロールが発生する縦長のサイトを読み込むと、初期表示の位置がページトップではなくページの途中から表示されてしまうケースがあります。

これはブラウザの仕様で、ウェブページをリロードした際に以前読み込んだ位置で再表示させるという、最近よく使われる比較的新しい機能になります。

ブログサイトなどでは、以前読んでいた箇所の続きから観覧を再開できるなど便利な面もありますが、サイトの演出やUIの都合上、またはパララックスデザインのサイトなどではどうしても初期表示はページトップで固定したい場合もあります。

そんなときのために、jQueryを使ってページのリロード直後にページの先頭までスクロールさせる方法を紹介します。

以下、1行にもまとめられる簡単なコードで実装可能。
[jQuery.js]を読み込んだ後に、下記のスクリプトを記述します。

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

jQueryメソッドの[animate]の第2引数で「'1'」を指定しているのは、「0」では動作しないことと、クォーテーションで括らないとInternet Explorer系で正常に動作しないためです。

また、スクロールが実行されるタイミングですが、$(window).load()を使っているので、「使用されている画像などを含め、ページが完全に読み込まれた」直後になります。

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google