blocks|key|3237661|text|您可以使用DOM+ready上的scrollTop方法来完成此操作|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3237662|$(document).ready(function(){
++++$(this).scrollTop(0);
});|code-block|syntax|javascript|3237663|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/ready/|1|http://api.jquery.com/scrollTop/^0|5|9|0|G|9|1|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]|$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]|Q|$5|L|M|N|C|$O|R]]]]

You can do it using the <a href="http://api.jquery.com/scrollTop/" rel="noreferrer">scrollTop</a> method on <a href="http://api.jquery.com/ready/" rel="noreferrer">DOM ready</a>:

<pre><code>$(document).ready(function(){
 $(this).scrollTop(0);
});
</code></pre>

blocks|key|300120|text|对于简单的普通JavaScript实现：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|300121|​|300122|window.onbeforeunload+=+function+()+{
++window.scrollTo(0,+0);
}|code-block|syntax|javascript|300123|300124|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

For a simple plain JavaScript implementation:
<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>window.onbeforeunload = function () {
 window.scrollTo(0, 0);
}</code></pre>
</div>
</div>

blocks|key|298081|text|这里的答案不适用于safari，document.ready经常过早地被触发。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|298082|我应该使用阻止你做一些setTimeout的beforeunload事件|offset|length|style|CODE|298083|$(window).on('beforeunload',+function(){
++$(window).scrollTop(0);
});|code-block|syntax|javascript|298084|entityMap^0|0|B|A|M|C|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@$D|Q|E|R|F|G]|$D|S|E|T|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|U|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

The answer here does not works for safari,
document.ready is often fired too early.

Ought to use the <code>beforeunload</code> event which prevent you form doing some <code>setTimeout</code>

<pre><code>$(window).on('beforeunload', function(){
 $(window).scrollTop(0);
});
</code></pre>

blocks|key|295049|text|同样，最好的答案是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|295050|window.onbeforeunload+=+function+()+{
++++window.scrollTo(0,0);
};|code-block|syntax|javascript|295051|(这只适用于非jQuery，如果您正在搜索JQ方法，请查找)|295052|编辑:一个小错误，它的"onbeforunload“:)+Chrome和其他浏览器”记住“卸载前的最后一个滚动位置，所以如果你在页面卸载前将值设置为0,0，它们将记住0,0，并且不会滚动回滚动条所在的位置:)|295053|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Again, best answer is:

<pre><code>window.onbeforeunload = function () {
 window.scrollTo(0,0);
};
</code></pre>

(thats for non-jQuery, look up if you are searching for the JQ method)

EDIT: a little mistake its "onbeforunload" :)
Chrome and others browsers "remember" the last scroll position befor unloading, so if you set the value to 0,0 just before the unload of your page they will remember 0,0 and won't scroll back to where the scrollbar was :)

blocks|key|295072|text|要重置窗口滚动回到顶部，beforeunload事件中的$(window).scrollTop(0)会执行此操作，然而，我在Chrome80中测试了它将在重新加载后返回到旧位置。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|295073|要防止出现这种情况，请将history.scrollRestoration设置为"manual"。|295074|//Reset+scroll+top

history.scrollRestoration+=+"manual";

$(window).on('beforeunload',+function(){
++++++$(window).scrollTop(0);
});|code-block|syntax|javascript|295075|entityMap^0|S|M|0|C|P|14|8|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

To reset window scroll back to top, <code>$(window).scrollTop(0)</code> in the beforeunload event does the tricks, however, I tested in Chrome 80 it will go back to the old location after the reload.

To prevent that, set the <code>history.scrollRestoration</code> to <code>"manual"</code>.

<pre><code>//Reset scroll top

history.scrollRestoration = "manual";

$(window).on('beforeunload', function(){
 $(window).scrollTop(0);
});
</code></pre>

blocks|key|3237653|text|检查jQuery+.scrollTop()+function+here|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3237654|它看起来会像这样|3237655|$(document).load().scrollTop(0);|code-block|syntax|javascript|3237656|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/scrollTop/^0|9|C|V|4|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|6|7|10|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|11|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

Check the jQuery <code>.scrollTop()</code> function <a href="http://api.jquery.com/scrollTop/" rel="noreferrer">here</a>

It would look something like

<pre><code>$(document).load().scrollTop(0);
</code></pre>

blocks|key|3023293|text|您也可以尝试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3023294|$(document).ready(function(){
++++$(window).scrollTop(0);
});|code-block|syntax|javascript|3023295|如果你想在x位置滚动，你可以将0的值改为x。|3023296|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You can also try 

<pre><code>$(document).ready(function(){
 $(window).scrollTop(0);
});
</code></pre>

If you want to scroll at x position than you can change the value of 0 to x.

blocks|key|300143|text|只需使用location.href+=+location.href而不是location.reload()。它不会像location.reload()那样滚动到上一个位置。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|300144|注意:如果URL中有任何#，则不会重新加载|300145|entityMap^0|4|T|10|H|1M|H|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|R|8|@]|D|@]|E|$]]]|I|$]]

Instead of <code>location.reload()</code>, simply use <code>location.href = location.href</code>. It will not scroll to the previous position as <code>location.reload()</code> does.

Note: This will not reload if there is any # in the URL

blocks|key|3023431|text|JS历史API具有scrollRestoration属性，当该属性设置为manual时，可防止恢复页面上的最后一个滚动位置：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3023432|if+(history.scrollRestoration)+{
++++history.scrollRestoration+=+'manual';
}+else+{
++++window.onbeforeunload+=+function+()+{
++++++++window.scrollTo(0,+0);
++++}
}|code-block|syntax|javascript|3023433|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The JS history API has the scrollRestoration property, which when set to manual, prevents the last scroll location on the page to be restored:
<pre><code>if (history.scrollRestoration) {
 history.scrollRestoration = 'manual';
} else {
 window.onbeforeunload = function () {
 window.scrollTo(0, 0);
 }
}
</code></pre>

blocks|key|3023311|text|<script>+location.hash+=+(location.hash)+?+location.hash+:+"+";+</script>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3023312|将上面的脚本放在html的<head>标记中。不确定单页应用程序的行为！但sure在普通页面上的效果就像是魅力。|unstyled|offset|length|style|CODE|3023313|entityMap^0|0|D|6|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@$G|O|H|P|I|J]]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>&lt;script&gt; location.hash = (location.hash) ? location.hash : " "; &lt;/script&gt;
</code></pre>

Put the above script in <code>&lt;head&gt;</code> tag of your html. Not sure how single page apps behave! But sure works like charm in regular pages.

blocks|key|3237807|text|如果页面中有视频，这里的答案(在$(document).ready中滚动)不起作用。在这种情况下，页面在此事件被激发后滚动，覆盖我们的工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3237808|最佳答案应该是：|3237809|$(window).on('beforeunload',+function(){
++++$(window).scrollTop(0);
});|code-block|syntax|javascript|3237810|entityMap^0|G|H|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

The answer here(scrolling in <code>$(document).ready</code>) doesn't work if there is a video in the page. In that case the page is scrolled after this event is fired, overriding our work.

Best answer should be:

<pre><code>$(window).on('beforeunload', function(){
 $(window).scrollTop(0);
});
</code></pre>

blocks|key|297501|text|$(document).ready(function(){
++++$(window).scrollTop(0);
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|297502|这对我不起作用，因为google+chrome会在页面加载完成后向下滚动。我使用的是|unstyled|297503|$(document).ready(function()+{
++++var+url+=+window.location.href;
++++console.log(url);
++++if(+url.indexOf('#')+<+0+)+{
++++++++window.location.replace(url+%2B+"#");
++++}+else+{
++++++++window.location.replace(url);
++++}
});|297504|//这会在页面的末尾加载一个#。因此，它将始终在顶部加载。|297505|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>$(document).ready(function(){
 $(window).scrollTop(0);
});
</code></pre>

did not work for me as google chrome would just scroll back down after the page finished loading.
What I used was 

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

// This loads the page with a # at the end. So it will always load at the top.

blocks|key|295077|text|这是最好的方法之一：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|295078|​|295079|<script>
$(window).on('beforeunload',+function()+{
++$('body').hide();
++$(window).scrollTop(0);
});
</script>|code-block|syntax|javascript|295080|295081|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

This is one of the best way to do so:
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script&gt;
$(window).on('beforeunload', function() {
 $('body').hide();
 $(window).scrollTop(0);
});
&lt;/script&gt;</code></pre>
</div>
</div>

blocks|key|3023426|text|您可以使用location.replace而不是location.reload|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|3023427|location.replace(location.href);|code-block|syntax|javascript|3023428|这样，页面将重新加载，并在顶部滚动。|3023429|entityMap^0|5|G|O|F|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

You can use location.replace instead of location.reload:
<pre><code>location.replace(location.href);
</code></pre>
This way page will reload with scroll on top.

blocks|key|3023376|text|超指数式的答案是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3023377|将此代码添加到js文件或脚本标记的顶部|offset|length|style|BOLD|3023378|document.documentElement.scrollTop+=+0;+//+For+Chrome,+Firefox,+IE+and+Opera

document.body.scrollTop+=+0;+//+For+Safari|code-block|syntax|javascript|3023379|entityMap^0|0|7|2|C|4|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@$D|Q|E|R|F|G]|$D|S|E|T|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|U|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

The supercalifragilisticexpialidocious answer is:

add this at the top of your js file or script tag

<pre><code>document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera

document.body.scrollTop = 0; // For Safari
</code></pre>

blocks|key|3237841|text|我发现这些CSS样式强制页面在重新加载/刷新时总是滚动到顶部：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3237842|html+{
++++height:+100%25;
++++overflow:+hidden;
++++width:+100%25;
}

body+{
++++height:+100%25;
++++overflow-x:+hidden;
++++overflow-y:+auto;
++++width:+100%25;
}|code-block|syntax|javascript|3237843|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I found that these CSS styles force the page to always scroll to top on reload/refresh:
<pre><code>html {
 height: 100%;
 overflow: hidden;
 width: 100%;
}

body {
 height: 100%;
 overflow-x: hidden;
 overflow-y: auto;
 width: 100%;
}
</code></pre>

I am building a website which I am publishing with <code>div</code>s. When I refresh the page after it was scrolled to position X, then the page is loaded with the scroll position as X.

How can I force the page to be scrolled to the top on page refresh?

<ul>
<li>What I can think of is of some JS or jQuery run as <code>onLoad()</code> function of the page to SET the pages scroll to top. But I don't know how I could do that.</li>
<li>A better option would be if there is some property or something to have the page loaded with its scroll position as default (i.e. at the top) which will be kind of like page load, instead of page refresh.</li>
</ul>

Force page scroll position to top at page refresh in HTML

jQuery

我正在建立一个网站，我正在用divs发布。当我刷新页面后，它被滚动到位置X，然后页面加载滚动位置为X。如何在页面刷新时强制页面滚动到顶部？我能想到的是一些JS或jQuery作为页面的onLoad()函数运行，来设置，，页面滚动到顶部。但我不知道如何做到这一点。一个更好的选择是，如果有一些属性或东西，让页面加载其滚动位置作为默认(即在顶部)，这将是一种类似于页面加载，而不是页面刷新。

问在HTML中强制页面滚动位置在页面刷新时置于顶部
EN

回答 16

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在HTML中强制页面滚动位置在页面刷新时置于顶部EN

回答 16

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在HTML中强制页面滚动位置在页面刷新时置于顶部
EN