如何使用 JavaScript/jQuery 滚动到页面顶部? [英] How to scroll to top of page with JavaScript/jQuery?

问题描述

有没有办法用 JavaScript/jQuery 控制浏览器滚动?

当我将页面向下滚动一半，然后触发重新加载时，我希望页面打包到顶部，但它会尝试找到最后一个滚动位置.所以我这样做了:

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

但没有运气.

编辑:

所以当我在页面加载后给他们打电话时，你的两个答案都有效 - 谢谢.但是，如果我只是在页面上刷新，看起来浏览器会在 .ready 事件之后计算并滚动到其旧的滚动位置(我也测试了主体 onload() 函数).

所以接下来的问题是，有没有办法阻止浏览器滚动到它过去的位置，或者在它完成它的事情后重新滚动到顶部?

解决方案

哇，这个问题我迟到了 9 年.给你:

将此代码添加到您的加载中.

//这可以防止页面向下滚动到之前的位置.if ('scrollRestoration' in history) {history.scrollRestoration = '手册';}//如果用户在页面加载期间向下滚动，并且您想确保页面在完全加载后滚动到顶部，则需要这样做.这具有跨浏览器支持.window.scrollTo(0,0);

要在窗口加载时运行它，只需像这样将它包装起来(假设您引用了 JQuery)

$(function() {//把代码放在这里});

history.scrollRestoration 浏览器支持:

Chrome:支持(自 46 起)

Firefox:支持(自 46 起)

Edge:支持(自 79 起)

IE:不支持

Opera:支持(自 33 起)

Safari:支持

对于 IE，如果您想在它自动向下滚动后重新滚动到顶部，那么这对我有用:

var isIE11 = !!window.MSInputMethodContext &&!!document.documentMode;如果(是IE11){setTimeout(function(){ window.scrollTo(0, 0); }, 300);//根据您的页面调整时间.更好的解决方案是可能绑定到某个事件并在自动滚动到顶部时触发.}

Is there a way to control browser scrolling with JavaScript/jQuery?

When I scroll my page half way down, then trigger a reload, I want the page to go pack to the top, but instead it tries to find the last scroll position. So I did this:

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

But no luck.

EDIT:

So both your answers worked when I call them after the page loads-Thanks. However, if I just do a refresh on the page, looks like the browser calculates and scrolls to its old scroll position AFTER the .ready event (I tested the body onload() function too).

So the follow up is, is there a way to PREVENT the browser scrolling to its past position, or to re-scroll to the top AFTER it does its thing?

解决方案

Wow, I'm 9 years late to this question. Here you go:

Add this code to your 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);

To run it on window load just put it wrap it like this (assumes you have JQuery referenced)

$(function() {
  // put the code here
});

history.scrollRestoration Browser support:

Chrome: supported (since 46)

Firefox: supported (since 46)

Edge: supported (since 79)

IE: not supported

Opera: supported (since 33)

Safari: supported

For IE if you want to re-scroll to the top AFTER it autoscrolls down then this worked for me:

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.
} 

这篇关于如何使用 JavaScript/jQuery 滚动到页面顶部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！