如何使用 JavaScript/jQuery 滚动到页面顶部?

IT技术 javascript jquery html scroll
2021-02-05 02:23:53

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

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

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

但没有运气。

编辑

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

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

6个回答

跨浏览器的纯 JavaScript 解决方案:

document.body.scrollTop = document.documentElement.scrollTop = 0;
由于您使用的是 jQuery,您可以试试这个: $(window).one("scroll",function() { /* the code from my answer here */ });
2021-03-24 02:23:53
只是想指出,根据我的测试(包括现代/2018 版 chrome),该解决方案更可靠地工作
2021-03-28 02:23:53
不适用于使用 FF 45.1.0 的 CentOS 6.7。我把它包在一个文档中。准备好只是为了确定。
2021-04-02 02:23:53
这不会“防止浏览器滚动到过去的位置”。看我的回答。
2021-04-08 02:23:53
为了在我的 IE/Chrome/FF 跨浏览器上进行这项工作,我必须结合 Niet Dark Absol 答案和 user113716 答案(使用超时)。
2021-04-10 02:23:53

几乎明白了 - 你需要设置scrollTopon body,而不是window

$(function() {
   $('body').scrollTop(0);
});

编辑:

也许您可以在页面顶部添加一个空白锚点:

$(function() {
   $('<a name="top"/>').insertBefore($('body').children().eq(0));
   window.location.hash = 'top';
});
上面的代码可以在 FF、Chrome 等现代浏览器中正常工作,但在 IE8 及以下版本中无法正常工作 尝试添加两者,'html','body'因为现代浏览器将基于正文滚动,但 IE8 及以下版本将仅使用'html'、'body'滚动
2021-03-16 02:23:53
今天试过了,在FF16中不起作用。使用纯 JS,在本页下方看到: document.body.scrollTop = document.documentElement.scrollTop = 0;
2021-04-05 02:23:53

哇,我问这个问题晚了 9 年。干得好:

将此代码添加到您的 onload.xml 文件中。

// 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 浏览器支持:

Chrome:支持(自 46 起)

Firefox:支持(自 46 起)

边缘:支持(自 79 起)

IE:不支持

Opera:支持(自 33 起)

Safari:支持

对于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.
} 
@Yarin,好点。我更新了我的帖子。这是否回答你的问题?
2021-03-16 02:23:53
@NikolaStojaković,谢谢,我已相应更新。
2021-03-29 02:23:53
@RayLoveless 现在支持 Edge。
2021-03-30 02:23:53
点赞,因为帮助别人永远不会太晚;即使是9年后。谢谢!
2021-04-01 02:23:53
谢谢@RayLoveless - 不幸的是,这不受 MS 浏览器的支持(当然是因为)。参见caniuse.com/#feat=mdn-api_history_scrollrestorationdeveloper.mozilla.org/de/docs/Web/API/...
2021-04-03 02:23:53

有没有办法阻止浏览器滚动到它过去的位置,或者在它完成它的事情后重新滚动到顶部?

以下 jquery 解决方案对我有用:

$(window).unload(function() {
    $('body').scrollTop(0);
});
是的,在刷新前滚动到顶部
2021-04-04 02:23:53
不完全跨浏览器,但仍然适用于大多数。当与其他一些答案结合使用时,这是一个很好的补充
2021-04-12 02:23:53

这是一个纯 JavaScript 动画滚动版本,适用于非 jQuery 用户:D

var stepTime = 20;
var docBody = document.body;
var focElem = document.documentElement;

var scrollAnimationStep = function (initPos, stepAmount) {
    var newPos = initPos - stepAmount > 0 ? initPos - stepAmount : 0;

    docBody.scrollTop = focElem.scrollTop = newPos;

    newPos && setTimeout(function () {
        scrollAnimationStep(newPos, stepAmount);
    }, stepTime);
}

var scrollTopAnimated = function (speed) {
    var topOffset = docBody.scrollTop || focElem.scrollTop;
    var stepAmount = topOffset;

    speed && (stepAmount = (topOffset * stepTime)/speed);

    scrollAnimationStep(topOffset, stepAmount);
};

接着:

<button onclick="scrollTopAnimated(1000)">Scroll Top</button>
凉爽的。虽然,我更喜欢requestAnimationStep而不是setTimeout. 它也没有回答 OP 的问题。
2021-03-31 02:23:53
在 Angular 中实现了这一点。奇迹般有效。谢谢
2021-04-12 02:23:53