現在のWebページのスクロール位置を取得および設定する方法は?


120

現在のWebページのスクロール位置を取得および設定するにはどうすればよいですか?

ユーザーのアクション/入力に基づいて更新する必要がある長いフォームがあります。これが発生すると、ページが一番上にリセットされます。これは、ユーザーがスクロールして元の位置に戻る必要があるため、ユーザーにとって煩わしいものです。

ページが再読み込みされる前に(非表示の入力で)現在のスクロール位置をキャプチャできれば、再読み込み後に元の位置に戻すことができます。


AJAX駆動のフォームは、これらの影響を防ぐためのより良い方法ではありませんか(そしてもちろん、XHRが利用できない場合のフォールバックを提供します)?ページの再読み込みでは、ページを先頭にジャンプして再び戻る必要があり、迷惑な場合があります。
Marcel Korpel、2010年

回答:


116

あなたはそのdocument.documentElement.scrollTop物件を探しています。


おかげで、私はこれを見つけました:articles.sitepoint.com/article/javascript-from-scratch/6、そしてgetScrollingPosition()隠し変数に値を格納するようにを変更しました。次に、私が使用する更新されたページのhtmlで、<body onLoad="window.scrollTo(x,y)xとyは非表示の値の値です!
xyz

46
私は、少なくともUbuntuのChromeでは、document.documentElement.scrollTop常に0を返していることを発見document.body.scrollTopしました。しかし、動作するようです。一方、Ubuntu上の1つのFirefoxはその逆です。bodyつまり、で0を、正しい量でを取得しdocumentElementます。何がわかるのですか?
2014年

12
このscrollTopプロパティはすべてのブラウザで機能するわけではないため、この答えは正確ではありません。チェックwindow.pageXOffsetしてwindow.pageYOffset、より良い結果を得るため。
gyo 2015年

135

現在受け入れられている答えは正しくありませdocument.documentElement.scrollTopん-Chromeでは常に0を返します。これは、WebKit bodyがスクロールの追跡に使用するのに対し、FirefoxとIEはを使用するためhtmlです。

現在の位置を取得するには、次のようにします。

document.documentElement.scrollTop || document.body.scrollTop

次のように、ページの現在の位置を1000pxに設定できます。

document.documentElement.scrollTop = document.body.scrollTop = 1000;

または、jQueryを使用します(作業中にアニメーション化します)。

$("html, body").animate({ scrollTop: "1000px" });

5
gyoの答え、またはメソッドwindow.pageYOffsetを使用している場合、提案はよりクリーンです。window.scrollBy()window.scrollTo()
igorsantos07 2017

32

ブラウザが現在のウィンドウスクロール座標をどのように公開するかには、いくつかの不整合があります。またはjQuery を使用すると、MacおよびiOS上のGoogle Chromeは常に戻るようです。0document.documentElement.scrollTop$(window).scrollTop()

ただし、以下と一貫して機能します。

// horizontal scrolling amount
window.pageXOffset

// vertical scrolling amount
window.pageYOffset

私も気づきましたが、MacとiOSのバグですか?
Alexander Kim

@AlexanderKimこれは、特定のCSSルール(オーバーフローなど)がどのように解釈されるかに関連していると思われ、body要素とhtml要素の両方でscrollTopをチェックすると機能することが報告されています。ただし、テストとデバッグを回避するために、私は常に安全で一貫性のあるpageXOffset / pageYOffsetに依存しています。
ギョ

正解、ありがとう
Michael Paccione

5

私はHTML5ローカルストレージソリューションを使用しました...すべてのリンクはwindow.locationを変更する前にこれを設定する関数を呼び出します:

localStorage.topper = document.body.scrollTop;

そして、各ページの本文のonLoadにこれがあります:

  if(localStorage.topper > 0){ 
    window.scrollTo(0,localStorage.topper);
  }

3
localStorageのsetItem()とgetItem()を使用して、リンクのクリックごとにスクロール位置をバックアップし、ページを離れるときに一度保存すると、よりエレガントになります:window.addEventListener( "beforeunload"、function(){localStorage。 setItem( "scrolly"、document.documentElement.scrollTop || document.body.scrollTop);});
StanE
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.