162

私はdivsで公開しているウェブサイトを構築しています。ページをXの位置にスクロールした後で更新すると、ページはXのスクロール位置で読み込まれます。

ページの更新時にページを強制的に一番上にスクロールするにはどうすればよいですか？

  • 私が考えることができるのは、ページを上にスクロールするように設定するために、ページの関数として実行されるJSまたはjQueryonLoad()です。しかし、どうすればそれができるのかわかりません。

  • より良いオプションは、ページを更新する代わりに、ページの読み込みのようなものになるデフォルト（つまり上部）でページをスクロール位置で読み込むプロパティなどがある場合です。

4

16 に答える 16

223

単純なプレーンJavaScript実装の場合：

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

于 2014-11-10T06:12:11.437 に答える
187

DOM対応のscrollTopメソッドを使用してそれを行うことができます：

$(document).ready(function(){
    $(this).scrollTop(0);
});
于 2010-09-08T03:15:41.587 に答える
39

ここでの答えはサファリでは機能しません。document.readyの起動が早すぎることがよくあります。

beforeunloadあなたがいくつかのことをするのを妨げるイベントを使うのは難しいsetTimeout

$(window).on('beforeunload', function(){
  $(window).scrollTop(0);
});
于 2014-04-26T15:05:06.910 に答える
27

繰り返しますが、最良の答えは次のとおりです。

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

（jQuery以外の場合は、JQメソッドを検索している場合は検索してください）

編集：その「onbeforunload」の少しの間違い:) Chromeや他のブラウザは、アンロード前の最後のスクロール位置を「記憶」しているため、ページのアンロードの直前に値を0,0に設定すると、0,0を記憶して勝ちますスクロールバーがあった場所にスクロールバックしないでください:)

于 2016-09-07T12:42:38.157 に答える
18

ウィンドウをリセットするには、スクロールして一番上に戻ります$(window).scrollTop(0)。beforeunloadイベントではトリックが実行されますが、Chrome 80でテストしたところ、リロード後に元の場所に戻ります。

これを防ぐには、をに設定history.scrollRestorationし"manual"ます。

//Reset scroll top

history.scrollRestoration = "manual";

$(window).on('beforeunload', function(){
      $(window).scrollTop(0);
});
于 2020-04-02T14:40:16.247 に答える
10

ここでjQuery.scrollTop()関数を確認してください

それは次のようになります

$(document).load().scrollTop(0);
于 2010-09-08T03:15:16.823 に答える
10

また、試すことができます

$(document).ready(function(){
    $(window).scrollTop(0);
});

xの位置でスクロールしたい場合は、0の値をxに変更できます。

于 2013-05-29T04:53:00.463 に答える
8

JS履歴APIにはscrollRestorationプロパティがあり、手動に設定すると、ページの最後のスクロール位置が復元されなくなります。

if (history.scrollRestoration) {
    history.scrollRestoration = 'manual';
} else {
    window.onbeforeunload = function () {
        window.scrollTo(0, 0);
    }
}
于 2021-04-26T14:26:02.593 に答える
7

の代わりにlocation.reload()、単に。を使用しますlocation.href = location.href。前の位置にスクロールすることはありませんlocation.reload()。

注：URLに＃が含まれている場合、これはリロードされません

于 2017-01-12T16:17:00.890 に答える
5 
<script> location.hash = (location.hash) ? location.hash : " "; </script>

上記のスクリプトを<head>htmlのタグに入れます。シングルページアプリがどのように動作するかわからない！しかし、確かに通常のページの魅力のように機能します。

于 2016-01-26T22:47:30.710 に答える
4

ページにビデオがある場合、ここでの答え（スクロールイン$(document).ready）は機能しません。その場合、このイベントが発生した後にページがスクロールされ、作業が上書きされます。

ベストアンサーは次のとおりです。

$(window).on('beforeunload', function(){
    $(window).scrollTop(0);
});
于 2017-01-12T12:12:19.240 に答える
3 
$(document).ready(function(){
    $(window).scrollTop(0);
});

ページの読み込みが完了した後、グーグルクロームが下にスクロールするだけなので、私にはうまくいきませんでした。私が使ったのは

$(document).ready(function() {
    var url = window.location.href;
    console.log(url);
    if( url.indexOf('#') < 0 ) {
        window.location.replace(url + "#");
    } else {
        window.location.replace(url);
    }
});

//これにより、最後に＃が付いたページが読み込まれます。したがって、常に一番上にロードされます。

于 2016-08-18T09:54:45.157 に答える
2

これは、そうするための最良の方法の1つです。

<script>
$(window).on('beforeunload', function() {
  $('body').hide();
  $(window).scrollTop(0);
});
</script>

于 2020-10-22T16:48:30.430 に答える
1

これらのCSSスタイルは、リロード/更新時にページを常に上にスクロールするように強制することがわかりました。

html {
    height: 100%;
    overflow: hidden;
    width: 100%;
}

body {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
}
于 2020-12-09T17:20:05.823 に答える
1

location.reloadの代わりにlocation.replaceを使用できます。

location.replace(location.href);

このようにして、ページは上にスクロールしてリロードされます。

于 2020-12-23T10:05:52.243 に答える
0

超カリフラジリスティックエクスピアリドーシャスの答えは次のとおりです。

これをjsファイルまたはスクリプトタグの先頭に追加します

document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera

document.body.scrollTop = 0; // For Safari
于 2019-08-30T07:35:38.537 に答える