[解決済み] JavaScript/jQueryでページの一番上にスクロールするには?
2022-03-01 09:08:02
質問
JavaScript/jQueryでブラウザのスクロールを制御する方法はありますか?
ページを半分までスクロールしてから再読み込みすると、ページを一番上に戻したいのですが、その代わりに最後のスクロール位置を探そうとします。そこで、次のようにしてみました。
$('document').ready(function() {
$(window).scrollTop(0);
});
しかし、運が悪い。
EDIT :
ページがロードされた後に呼び出すと、お二人の回答は両方とも機能しました。しかし、ページを更新すると、ブラウザが計算し、古いスクロール位置にスクロールするように見える
.ready
イベント(ボディのonload()関数もテストしました)。
つまり、ブラウザが過去の位置までスクロールするのを防ぐ方法、または、スクロールした後に一番上まで再スクロールする方法はありますか?
解決方法は?
うわー、9年遅れの質問です。 さあ、どうぞ。
このコードをonloadに追加してください。
// This prevents the page from scrolling down to where it was previously.
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
}
// This is needed if the user scrolls down during page load and you want to make sure the page is scrolled to the top once it's fully loaded. This has Cross-browser support.
window.scrollTo(0,0);
ウィンドウの読み込み時に実行するには、次のようにラップしてください。 JQuery を参照)
$(function() {
// put the code here
});
history.scrollRestoration ブラウザ対応。
クローム:対応(46以降)
Firefox: サポートされています(46以降)
エッジ:対応(79年以降)
IEです。 対応しない
オペラ:対応(33以降)
サファリ:対応
について IE 自動でスクロールした後、一番上に再スクロールしたい場合は、この方法でうまくいきました。
var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
if(isIE11) {
setTimeout(function(){ window.scrollTo(0, 0); }, 300); // adjust time according to your page. The better solution would be to possibly tie into some event and trigger once the autoscrolling goes to the top.
}
関連
-
[解決済み】npm install --legacy-peer-deps は具体的に何をするのですか?どんなときに推奨されるのか/どんな使用例が考えられるのか?
-
[解決済み】module.exports "モジュールが定義されていません"
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] JavaScriptでページの一番上までスクロールする?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】NodeJS "ESモジュールをロードするためにインポートを使用する必要があります。"
-
[解決済み】JavaScriptのinnerHTMLで要素が更新されない
-
[解決済み】「Uncaught TypeError: Chromeで "Illegal invocation "が発生する。
-
[解決済み】ある要素を別の要素に移動させるには?
-
[解決済み】Uncaught ReferenceError。Reactが定義されていない
-
[解決済み】React、Uncaught ReferenceError。ReactDOMは定義されていません
-
[解決済み】JavaScript ランタイムエラー:'$'が未定義です。
-
[解決済み】エラー:リクエストのエンティティが大きすぎる
-
[解決済み] ローカルファイルを開くことができません - Chrome: ローカルリソースのロードが許可されていません
-
[解決済み】JavaScriptで相対URLへのリダイレクトを行う