使用JavaScript滚动到页面顶部？

如何使用JavaScript滚动到页面顶部？滚动条立即跳到页面顶部也是可取的，因为我不希望实现平滑滚动。

当前回答

如果您不希望平滑滚动，您可以在启动平滑滚动动画时立即欺骗并停止它……如下所示：

   $(document).ready(function() {
      $("a[href='#top']").click(function() {
          $("html, body").animate({ scrollTop: 0 }, "1");              
          $('html, body').stop(true, true);

          //Anything else you want to do in the same action goes here

          return false;                              
      });
  });

我不知道它是否被推荐/允许，但它有效：）

你什么时候用这个？我不确定，但也许当您想使用Jquery一键制作一件事情的动画，而不使用动画制作另一件事情时？即打开页面顶部的管理登录面板中的幻灯片，然后立即跳到顶部查看。

2014-05-13 16:53:06

其他回答

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

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

2012-04-23 09:53:12

动机

这个简单的解决方案在本地工作，并实现了到任何位置的平滑滚动。

它避免了使用锚链接（带有#的链接），在我看来，如果你想链接到一个部分，这些链接是有用的，但在某些情况下不是很舒服，特别是当指向顶部时，这可能会导致两个不同的URL指向同一位置(http://www.example.org和http://www.example.org/#).

解决方案

在要滚动到的标记中添加一个id，例如第一个部分，它回答了这个问题，但id可以放在页面的任何位置。

<body>
  <section id="top">
    <!-- your content -->
  </section>
  <div id="another"><!-- more content --></div>

然后，作为一个按钮，您可以使用链接，只需使用如下代码编辑onclick属性即可。

<a onclick="document.getElementById('top').scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })">Click me</a>

其中document.getElementById的参数是单击后要滚动到的标记的id。

2018-05-09 08:46:00

使用window.scrowlTo（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秒后它会消失

2010-09-01 13:01:43

许多用户建议同时选择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();
}

2014-10-31 18:56:06

$（“.solltop”）.click（函数）{$（“html，body”）.animate（｛scrollTop:0｝，“slow”）；return false；});.节{高度：400px；}.第1节{背景色：#333；}.第2节{背景色：红色；}.第3节{背景色：黄色；}.第4节{背景色：绿色；}.滚动条{位置：固定；右：10px；底部：10px；颜色：#fff；}<html><head><title>滚动顶部演示</title><script src=“https://code.jquery.com/jquery-3.3.1.js“></script></head><body><div class=“content wrapper”><div class=“section section1”></div><div class=“section section2”></div><div class=“section section3”></div><div class=“section section4”></div>滚动顶部</a></div></body></html>

2018-07-14 07:45:01

使用JavaScript滚动到页面顶部？

推荐文章

最新文章

标签