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

有没有用 JavaScript/jQuery 控制浏览器滚动的方法？

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

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

但是不走运。

返回文章页面

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

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

355824 次浏览
小开

你需要把 scrollTop设置在 body上，而不是 window:

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

编辑:

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

$(function() {
$('<a name="top"/>').insertBefore($('body').children().eq(0));
window.location.hash = 'top';
});
小开

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

document.body.scrollTop = document.documentElement.scrollTop = 0;
小开

要回答编辑过的问题，您可以这样注册 onscroll处理程序:

document.documentElement.onscroll = document.body.onscroll = function() {
this.scrollTop = 0;
this.onscroll = null;
}

这将使得第一次尝试滚动(很可能是浏览器自动完成的)将被有效地取消。

小开

这对我有用:

window.onload = function() {
// short timeout
setTimeout(function() {
$(document.body).scrollTop(0);
}, 15);
};

在 onload中使用一个短的 setTimeout来给浏览器一个滚动的机会。

小开
有没有办法防止浏览器 滚动到它过去的位置，或者 完成后，重新滚动到顶部 东西

下面的 jquery 解决方案适合我:

$(window).unload(function() {
$('body').scrollTop(0);
});
小开

查看散列应该做的工作。如果您有一个标题，您可以使用

window.location.href = "#headerid";

否则，# alone 将起作用

window.location.href = "#";

当它被写入网址时，如果你刷新它就会保持不变。

事实上，如果您想在 onclick 事件中执行此操作，您不需要使用 JavaScript，只需在元素周围放置一个链接，并将 # 作为 href 赋予它。

小开

为什么不在 html 文件的开头使用一些引用元素呢

<div id="top"></div>

然后，当页面加载时，简单地执行

$(document).ready(function(){


top.location.href = '#top';


});

如果浏览器滚动 之后这个函数触发，你只需要

$(window).load(function(){


top.location.href = '#top';


});
小开 
$(function() {
// the element inside of which we want to scroll
var $elem = $('#content');


// show the buttons
$('#nav_up').fadeIn('slow');
$('#nav_down').fadeIn('slow');


// whenever we scroll fade out both buttons
$(window).bind('scrollstart', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
});
// ... and whenever we stop scrolling fade in both buttons
$(window).bind('scrollstop', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'1'});
});


// clicking the "down" button will make the page scroll to the $elem's height
$('#nav_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
}
);
// clicking the "up" button will make the page scroll to the top of the page
$('#nav_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
}
);
});

用这个

小开

下面的代码可以在 Firefox，Chrome 和 旅行中运行，但是我无法在 Internet Explorer 中测试。有人可以测试它，然后编辑我的答案或评论吗？

$(document).scrollTop(0);
小开

首先在你想去的地方添加一个空白的锚标记

<a href="#topAnchor"></a>

现在在标题部分添加一个函数

 function GoToTop() {
var urllocation = location.href;
if (urllocation.indexOf("#topAnchor") > -1) {
window.location.hash = "topAnchor";
} else {
return false;
}
}

最后向 body 标记添加一个 onload 事件

<body onload="GoToTop()">
小开

在我的案例中，身体不起作用:

$('body').scrollTop(0);

但 HTML 起作用了:

$('html').scrollTop(0);
小开

这里是一个纯 JavaScript 动画滚动版本的 no-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>
小开

跨浏览器滚动到顶部:

        if($('body').scrollTop()>0){
$('body').scrollTop(0);         //Chrome,Safari
}else{
if($('html').scrollTop()>0){    //IE, FF
$('html').scrollTop(0);
}
}

跨浏览器滚动到 id = div _ id 的元素:

        if($('body').scrollTop()>$('#div_id').offset().top){
$('body').scrollTop($('#div_id').offset().top);         //Chrome,Safari
}else{
if($('html').scrollTop()>$('#div_id').offset().top){    //IE, FF
$('html').scrollTop($('#div_id').offset().top);
}
}
小开 
var totop = $('#totop');
totop.click(function(){
$('html, body').stop(true,true).animate({scrollTop:0}, 1000);
return false;
});


$(window).scroll(function(){
if ($(this).scrollTop() > 100){
totop.fadeIn();
}else{
totop.fadeOut();
}
});


<img id="totop" src="img/arrow_up.png" title="Click to go Up" style="display:none;position:fixed;bottom:10px;right:10px;cursor:pointer;cursor:hand;"/>
小开

如果你处于怪癖模式(感谢@Niet the Dark Absol) :

document.body.scrollTop = document.documentElement.scrollTop = 0;

如果你处于严格模式:

document.documentElement.scrollTop = 0;

这里不需要 jQuery。

小开

这是有效的:

jQuery(document).ready(function() {
jQuery("html").animate({ scrollTop: 0 }, "fast");
});
小开

可以与 jQuery 一起使用

jQuery(window).load(function(){


jQuery("html,body").animate({scrollTop: 100}, 1000);


});
小开

我的纯(动画) Javascript 解决方案:

function gototop() {
if (window.scrollY>0) {
window.scrollTo(0,window.scrollY-20)
setTimeout("gototop()",10)
}
}

说明:

window.scrollY是一个由浏览器维护的变量，它表示窗口被滚动过的顶部像素的数量。

window.scrollTo(x,y)是一个函数，它在 x 轴和 y 轴上滚动窗口特定数量的像素。

因此，window.scrollTo(0,window.scrollY-20)将页面向顶部移动20像素。

setTimeout在10毫秒内再次调用该函数，这样我们就可以将它再移动20像素(动画) ，而 if语句检查我们是否仍然需要滚动。

小开

一个适用于任何 X 和 Y 值的通用版本，与 window.scrollTo api 相同，只是添加了 scrollDuration。

* 与 window.scrollTo 浏览器 api 匹配的通用版本 * * 

function smoothScrollTo(x, y, scrollDuration) {
x = Math.abs(x || 0);
y = Math.abs(y || 0);
scrollDuration = scrollDuration || 1500;


var currentScrollY = window.scrollY,
currentScrollX = window.scrollX,
dirY = y > currentScrollY ? 1 : -1,
dirX = x > currentScrollX ? 1 : -1,
tick = 16.6667, // 1000 / 60
scrollStep = Math.PI / ( scrollDuration / tick ),
cosParameterY = currentScrollY / 2,
cosParameterX = currentScrollX / 2,
scrollCount = 0,
scrollMargin;


function step() {
scrollCount = scrollCount + 1;


if ( window.scrollX !== x ) {
scrollMargin = cosParameterX + dirX * cosParameterX * Math.cos( scrollCount * scrollStep );
window.scrollTo( 0, ( currentScrollX - scrollMargin ) );
}


if ( window.scrollY !== y ) {
scrollMargin = cosParameterY + dirY * cosParameterY * Math.cos( scrollCount * scrollStep );
window.scrollTo( 0, ( currentScrollY - scrollMargin ) );
}


if (window.scrollX !== x || window.scrollY !== y) {
requestAnimationFrame(step);
}
}


step();
}
小开

更新

在 javascript 中，使用滚动效果到页面顶部会更容易一些:

https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

有两种使用 scroll API的方法。

这是我推荐的方法。使用 选择对象:

window.scroll(options)

这是一个更好的选择，因为您可以定义一个 behavior道具，应用一个内置的放松动画。

window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});

另一种方法是使用 x 和 y 坐标。

window.scroll(x-coord, y-coord)

X-coord-是要显示在左上角的文档的水平轴上的像素。

Y- 科德-是要显示在左上角的文档垂直轴上的像素。

旧的答案不要使用

这是我们的常规 javascript实现。它有一个简单的缓解效果，使用户不会得到震惊后，单击 到顶端按钮。

它非常小，缩小后甚至更小。寻找 jquery 方法替代品但希望得到相同结果的开发人员可以尝试这样做。

JS

document.querySelector("#to-top").addEventListener("click", function(){


var toTopInterval = setInterval(function(){


var supportedScrollTop = document.body.scrollTop > 0 ? document.body : document.documentElement;


if (supportedScrollTop.scrollTop > 0) {
supportedScrollTop.scrollTop = supportedScrollTop.scrollTop - 50;
}


if (supportedScrollTop.scrollTop < 1) {
clearInterval(toTopInterval);
}


}, 10);


},false);

超文本标示语言

<button id="to-top">To Top</button>

干杯！

小开

没有动画，只有 scroll(0, 0)(香草 JS)

小开

使用以下函数

window.scrollTo(xpos, ypos)

这里 xpos 是必需的。要沿着 x 轴(水平)滚动到的坐标，以像素为单位

Ypos 也是必需的。以像素为单位沿 y 轴(垂直)滚动到的坐标

小开

如果有人使用角度和材料设计与 Sidenav。这会把你送到页面的顶部:

let ele = document.getElementsByClassName('md-sidenav-content');
let eleArray = <Element[]>Array.prototype.slice.call(ele);
eleArray.map( val => {
val.scrollTop = document.documentElement.scrollTop = 0;
});
小开 
 <script>
sessionStorage.scrollDirection = 1;//create a session variable
var pageScroll = function() {
window.scrollBy ({
top: sessionStorage.scrollDirection,
left: 0,
behavior: 'smooth'
});
if($(window).scrollTop() + $(window).height() > $(document).height() - 1)
{
sessionStorage.scrollDirection= Number(sessionStorage.scrollDirection )-300;
setTimeout(pageScroll,50);//
}
else{
sessionStorage.scrollDirection=Number(sessionStorage.scrollDirection )+1
setTimeout(pageScroll,300);
}
};
pageScroll();
</script>
小开

这两者的结合帮助了我。其他的答案对我都没有帮助，因为我有一个没有滚动的旁路。

 setTimeout(function () {
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});


document.body.scrollTop = document.documentElement.scrollTop = 0;


}, 15);
小开
最佳答案

哇，这个问题我已经迟了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
});

返回文章页面浏览器支持:

Chrome: 支持(从46开始)

Firefox: 支持(从46开始)

边缘: 支持(自79)

不支持

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

我记得在别的地方看到过这个帖子(我找不到在哪里) ，但是这个真的很有效:

setTimeout(() => {
window.scrollTo(0, 0);
}, 0);
这很奇怪，但是它的工作方式是基于 JavaScript 堆栈队列的工作方式。完整的解释可以在“零延迟”部分找到 给你。

基本思想是，setTimeout的时间实际上并不指定它将等待的设定时间量，而是它将等待的最小时间量。因此，当您告诉它等待0ms，浏览器运行所有其他排队进程(如滚动窗口到您最后一次访问的位置) ，然后执行回调。译注:
小开

2021年的现代解决方案

document.body.scrollIntoView({behavior: "smooth"});

适用于包括 IE 在内的所有浏览器(老版本的浏览器不支持平滑滚动)。

enter image description here


提交答案