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

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

当我将页面向下滚动一下，然后触发一个重新加载，我希望页面打包到顶部，而是试图find最后一个滚动位置。 所以我这样做了：

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

但没有运气。

编辑 ：

因此，当我在页面加载之后调用它们时，您的答案都起作用 – 谢谢。 但是，如果我只是在页面上进行刷新，看起来像浏览器计算并滚​​动到旧的滚动位置之后的.ready事件（我也testing了body onload（）函数）。

所以后续是，有没有办法阻止浏览器滚动到过去的位置，或重新滚动到顶部之后，它做的事情？

Answer 1

跨浏览器的纯JavaScript解决scheme：

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

Answer 2

你几乎得到它 – 你需要设置body上的scrollTop ，而不是window ：

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

编辑：

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

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

Answer 3

有没有一种方法来防止浏览器滚动到过去的位置，或重新滚动到顶部之后，它做的事情？

下面的jquery解决scheme适用于我：

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

Answer 4

下面是no-jQuery'ers的纯JavaScriptanimation滚动版本：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> 

Answer 5

这适用于我：

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

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

Answer 6

使用以下function

 window.scrollTo(xpos, ypos) 

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

ypos也是必需的。 沿着y轴（垂直）以像素为单位滚动到的坐标

Answer 7

 $(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); } ); }); 

用这个

Answer 8

你可以使用jQuery

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

Answer 9

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

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

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

 $(document).ready(function(){ top.location.href = '#top'; }); 

如果浏览器在此函数触发后滚动，则只需执行此操作

 $(window).load(function(){ top.location.href = '#top'; }); 

Answer 10

跨浏览器滚动到顶部：

  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); } } 

Answer 11

以下代码适用于Firefox，Chrome和Safari ，但无法在Internet Explorer中进行testing。 有人可以testing它，然后编辑我的答案或评论呢？

 $(document).scrollTop(0); 

Answer 12

我的纯（animation）Javascript解决scheme：

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

说明：

window.scrollY是一个由浏览器维护的窗口已经滚动的顶部像素数量的variables。

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

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

setTimeout在10毫秒内再次调用函数，然后我们可以再移动20个像素（animation）， if语句检查是否仍然需要滚动。

Answer 13

这是我们的香草javascript实现。 它有一个简单的缓动效果，以便用户在点击To Topbutton后不会感到震惊。

它很小，缩小时会变得更小。 开发人员寻找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); 

HTML

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

干杯!

Answer 14

要回答你编辑的问题，你可以像这样注册onscroll处理程序：

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

这将使得第一次尝试滚动（这可能是由浏览器自动完成的）将被有效取消。

Answer 15

如果你在quircks模式（感谢@Niet the Dark Absol）：

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

如果你处于严格的模式：

 document.documentElement.scrollTop = 0; 

这里不需要jQuery。

Answer 16

这是工作：

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

Answer 17

在我的情况下身体没有工作：

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

但HTML工作：

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

Answer 18

 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;"/> 

Answer 19

没有animation，只是scroll(0, 0) （香草JS）

Answer 20

如果有人正在使用sidenav的angular度和材料devise。 这会将您发送到页面的顶部：

 let ele = document.getElementsByClassName('md-sidenav-content'); let eleArray = <Element[]>Array.prototype.slice.call(ele); eleArray.map( val => { val.scrollTop = document.documentElement.scrollTop = 0; }); 

Answer 21

看到哈希应该做的工作。 如果你有一个头，你可以使用

 window.location.href = "#headerid"; 

否则，单独＃将工作

 window.location.href = "#"; 

当它被写入url时，如果刷新，它将会保留。

事实上，如果你想在onc​​lick事件上做这个事情，你不需要使用JavaScript，你只需要把一个链接放在你的元素上，然后把它作为href。

Answer 22

首先添加一个空白的锚点标签到你想去的地方

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

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

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

最后添加一个onload事件到body标签

 <body onload="GoToTop()"> 

Answer 23

适用于任何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(); }