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

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

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

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

但没有运气。

编辑

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

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

跨浏览器的纯JavaScript解决scheme:

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

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

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

编辑:

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

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

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

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

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

下面是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> 

这适用于我:

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

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

使用以下function

 window.scrollTo(xpos, ypos) 

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

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

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

用这个

你可以使用jQuery

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

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

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

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

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

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

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

跨浏览器滚动到顶部:

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

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

 $(document).scrollTop(0); 

我的纯(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语句检查是否仍然需要滚动。

这是我们的香草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> 

干杯!

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

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

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

如果你在quircks模式(感谢@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"); }); 

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

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

但HTML工作:

 $('html').scrollTop(0); 
 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;"/> 

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

如果有人正在使用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; }); 

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

 window.location.href = "#headerid"; 

否则,单独#将工作

 window.location.href = "#"; 

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

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

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

 <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()"> 

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