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

哇,这个问题我晚了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);

历史.滚动恢复浏览器支持:

Chrome:支持(自46年起)

边缘:支持(自79年以来)

即:

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

跨浏览器、纯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);
});

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>

更新

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

有两种使用方法 scroll API .

这是我推荐的方法。使用 option

window.scroll(options)

behavior 应用一个内置的放松动画的道具。

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

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

x坐标 -要显示在左上角的文档水平轴上的像素。

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

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

还需要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 ,但我无法在InternetExplorer中测试这个。有人可以测试它,然后编辑我的答案或评论吗?

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

因此, 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);
            }
        } 

        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').scrollTop(0);

这两者的结合帮助了我。其他答案都没有帮助我,因为我有一个侧导航,不能滚动。

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

window.location.href = "#headerid";

否则,光靠这个就行了

window.location.href = "#";

当它被写入到url中时,如果你刷新它,它就会保留下来。

事实上,您不需要JavaScript来实现这一点,如果您想在onclick事件上执行此操作,只需在元素周围放置一个链接并将其作为href。

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

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

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

<body onload="GoToTop()">

*与窗口.滚动到浏览器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的堆栈队列的工作方式。找到了完整的解释 here 在零延迟部分。

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>