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

有没有一种方法可以使用JavaScript / jQuery控制浏览器滚动？

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

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

但是没有运气。

编辑：

因此，当页面加载后，我打电话给您时，您的两个答案都有效。但是，如果我只是刷新页面，看起来就像浏览器在.ready事件发生后计算并滚动到其旧滚动位置（我也测试了body onload（）函数）。

因此，接下来的工作是，有没有办法防止浏览器滚动到其过去的位置，或者在它执行其操作后重新滚动到顶部？

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

history.scrollRestoration浏览器支持：

Chrome：受支持（自46开始）

Firefox：受支持（自46开始）

IE / Edge：不支持（尚..）

Opera：受支持（自33起）

Safari：受支持

对于IE / Edge，如果要在其自动向下滚动后重新滚动到顶部，则对我有用：

var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
var isEdge = /Edge/.test(navigator.userAgent);
if(isIE11 || isEdge) {
    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解决方案：

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

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

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

编辑：

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

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

有没有一种方法可以防止浏览器滚动到其过去的位置，或者在完成其工作后重新滚动到顶部？

以下jquery解决方案适用于我：

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

这是没有jQuery'ers的纯JavaScript动画滚动版本：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>

更新

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

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scroll

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

警告

我们在最近的项目中一直在使用此功能，但是我在更新答案时刚刚检查了mozilla doc，我相信它已经更新了。眼下的方法是window.scroll(x-coord, y-coord)，不提及或说明使用的例子object，你可以设置参数behavior来smooth。我只是尝试了代码，它仍然可以在chrome和firefox中使用，并且object参数仍在规范中。

因此，请谨慎使用，也可以使用此Polyfill。除了滚动到顶部，这也填充工具处理其他方法：window.scrollBy，element.scrollIntoView，等。

老答案

这是我们的原始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);

的HTML

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

干杯!

这对我有用：

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

setTimeout在内使用一个简短内容onload，使浏览器有机会进行滚动。

您可以使用jQuery

jQuery(window).load(function(){

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

});

使用以下功能

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

用这个

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

$(document).scrollTop(0);

我的纯（动画）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语句检查我们仍然需要滚动。

您为什么不只在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);
            }
        } 

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

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

这样就可以有效地取消第一次滚动尝试（可能是浏览器自动进行的尝试）。

如果您处于快速模式（感谢@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);

这两个的结合帮助了我。由于我的sidenav不能滚动，因此其他答案都无济于事。

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

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

}, 15);

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

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

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

Seeint哈希应该可以完成这项工作。如果您有标题，则可以使用

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

我记得在其他地方看到过此消息（我找不到位置），但这确实很好：

setTimeout(() => {
    window.scrollTo(0, 0);
}, 0);

这很奇怪，但是它的工作方式是基于JavaScript的堆栈队列的工作方式。完整的解释发现这里的零延迟部分。

基本思想是，时间for setTimeout并未实际指定要等待的设置时间，而是指定了要等待的最短时间。因此，当您告诉它等待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>