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


我有一个 <button> 在页面上,按下此按钮时隐藏 <div> 使用jQuery显示。

如何使用该函数中的JavaScript / jQuery命令滚动到页面顶部?即使滚动条立即跳到顶部也是可取的。我不是在寻找一个平滑的滚动。


1274
2017-07-17 17:59


起源




答案:


如果您不需要更改动画,那么您不需要使用任何特殊插件 - 我只使用本机JavaScript window.scrollTo方法 - 传入0,0会立即将页面滚动到左上角。

window.scrollTo(x-coord, y-coord);

参数

  • x-coord是沿水平轴的像素。
  • y-coord是沿垂直轴的像素。

1745
2017-07-17 18:42



这是我的观点,如果您不需要动画平滑滚动,那么您不需要使用jQuery。 - daniellmb
有趣的是,杰夫的评论是老实说,对于那些只想让事情跨浏览器工作的人,95%的时间应该只使用jQuery。这来自于现在必须编写大量纯JavaScript的人,因为我们无法负担降低广告代码的库的开销:( - Will
这个答案与这个问题无关。如果问题是:我应该使用哪些脚本和方法滚动到页面顶部?正确答案在这里: stackoverflow.com/questions/4147112/... - skobaljic
在Firefox 40和Chrome 44中为我工作(解决米哈伊尔的评论) - tony
滚动到页面底部 window.scrollTo(0, document.body.scrollHeight); - emix


如果你想要平滑滚动,尝试这样的事情:

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

这将需要任何 <a> 标签的 href="#top" 并使其平滑滚动到顶部。


1180
2017-07-17 19:43



scrollTop不是函数,它是window元素的属性 - Jalal El-Shaer
api.jquery.com/scrollTop 对于jQuery的scrollTop() - funk-shun
使用animate的完整回调时,这不能正常工作,因为它将运行两次。 - David Morales
“html”和“body”都是浏览器兼容性所必需的,即Chrome v27仅使用“body”滚动而IE8则不滚动。 IE8仅使用“html”滚动,但Chrome v27不滚动。 - SushiGuy
@jalchr实际上, window.pageYOffset 将是窗口e̶l̶e̶m̶e̶n̶t̶对象的属性。 - Alex W


试试这个滚动到顶部

<script>
 $(document).ready(function(){
    $(window).scrollTop(0);
});
</script>

123
2018-05-21 07:45





你不需要jQuery来做到这一点。标准HTML标签就足够了......

<div id="jump_to_me">
    blah blah blah
</div>

<a target="#jump_to_me">Click Here To Destroy The World!</a>

83
2017-07-17 18:51



+1如果您需要导航到特定元素而不是顶部,那么这很好。 - Ish
使用“<a href="#">热门</a>”跳转到页面顶部。 - Bakanekobrain
这似乎是处理SPA时最好的方法 - Phil
太好了!有没有办法让它顺利滚动? - stallingOne


所有这些建议都适用于各种情况。对于那些通过搜索找到此页面的人,也可以给予 这个 一试。 JQuery,没有插件,滚动到元素。

$('html, body').animate({
    scrollTop: $("#elementID").offset().top
}, 2000);

47
2018-04-23 09:53





平滑滚动,纯javascript:

(function smoothscroll(){
    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0) {
         window.requestAnimationFrame(smoothscroll);
         window.scrollTo (0,currentScroll - (currentScroll/5));
    }
})();

29
2018-05-29 10:49





<script>

  $("a[href='#top']").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
  });
</script>

在HTML中

<a href="#top">go top</a>

25
2018-02-14 16:44





如果你想平滑滚动,请试试这个:

$("a").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
});

另一个解决方案是JavaScript window.scrollTo方法:

 window.scrollTo(x-value, y-value);

参数:

  • x值是沿水平轴的像素。
  • y值是沿垂直轴的像素。

23
2017-09-11 10:37



copycat ...看到用户的答案......这只是前2个答案的汇编.... - Laurent B
这是使用stackoverflow的合法方式 - 将它放在一个地方更实际。 Joel Spolsky使用现有答案的重复使用作为stackoverflow应该如何工作的一个例子。如果您有兴趣,我可以尝试找到博客文章 - Edgar H


window.scrollTo(0, 0); 非常快
所以我尝试了Mark Ursino的例子,但在Chrome中没有任何反应
我发现了这个

$('.showPeriodMsgPopup').click(function(){
    //window.scrollTo(0, 0);
    $('html').animate({scrollTop:0}, 'slow');//IE, FF
    $('body').animate({scrollTop:0}, 'slow');//chrome, don't know if Safari works
    $('.popupPeriod').fadeIn(1000, function(){
        setTimeout(function(){$('.popupPeriod').fadeOut(2000);}, 3000);
    });
});

测试了所有3个浏览器并且它有效
我正在使用蓝图css
这是当客户点击“立即预订”按钮并且没有选择租借期间时,慢慢移动到日历所在的顶部并打开指向2个字段的对话框div,3秒后它会消失


21
2017-09-01 13:01



感谢您指出您需要同时定位html和body。我只是为html做这件事,并想知道为什么它在Chrome中不起作用。 - Jared
身体动画在Safari中有效,所以我会相应地更新你的答案。 - Dave DuPlantis
“测试 所有3个浏览器“?Midori,LuaKit和Konqueror,对吧?:p - Anko
为什么不做$('html','body')。animate({scrollTop:0})而不是添加两行? - Matt Smith


一个 批量    用户 建议选择html和body标签以实现跨浏览器兼容性,如下所示:

$('html, body').animate({ scrollTop: 0 }, callback);

如果您指望只运行一次回调,这可能会让您失望。它实际上会运行两次因为你选择了两个元素。

如果这对您来说是个问题,您可以这样做:

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

    $('body').animate({ scrollTop: 0 }, callback);
}

这可行的原因在于Chrome $('html').scrollTop() 返回0,但不在其他浏览器中,如Firefox。

如果您不希望在滚动条已位于顶部的情况下等待动画完成,请尝试以下操作:

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

    if ($('body').scrollTop()) {
        $('body').animate({ scrollTop: 0 }, callback);
        return;
    }

    callback();
}

21
2017-10-31 18:56





真奇怪:这个问题现在已经活跃了五年了,而且还没有一个简单的JavaScript答案来动画滚动...所以你走了:

var scrollToTop = window.setInterval(function() {
    var pos = window.pageYOffset;
    if ( pos > 0 ) {
        window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
    } else {
        window.clearInterval( scrollToTop );
    }
}, 16); // how fast to scroll (this equals roughly 60 fps)

如果你愿意,你可以将它包装在一个函数中并通过它调用它 onclick 属性。检查一下 的jsfiddle

注意:这是一个非常基本的解决方案,可能不是最高效的解决方案。这里有一个非常详细的例子: https://github.com/cferdinandi/smooth-scroll


18
2017-10-02 10:00



该问题明确要求提供jQuery解决方案。所以不奇怪 - Will
最适合我的解决方案。没有插件,没有笨重的jquery库只是简单的javascript。荣誉 - user2840467