使用JavaScript滚动到页面顶部？

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

当前回答

动机

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

它避免了使用锚链接（带有#的链接），在我看来，如果你想链接到一个部分，这些链接是有用的，但在某些情况下不是很舒服，特别是当指向顶部时，这可能会导致两个不同的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

其他回答

有趣的是，其中大多数根本不适合我，所以我使用了jQuery-ScrollTo.js：

wrapper.find(".jumpToTop").click(function() {
    $('#wrapper').ScrollTo({
        duration: 0,
        offsetTop: -1*$('#container').offset().top
    });
});

它奏效了$（document）.sollTop（）返回了0，而这个函数实际上起了作用。

2015-12-26 00:53:02

如果您想滚动到具有ID的任何元素，请尝试以下操作：

$('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash;
    $target = $(target);
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 700, 'swing', function () {
        window.location.hash = target;
    });
});``

2013-09-19 15:01:15

尝试以下代码：

$('html, body').animate({
    scrollTop: $("div").offset().top
}, time);

div=>要移动滚动的Dom元素。

时间=>毫秒，定义滚动速度。

2017-08-08 07:42:55

如果您想平滑滚动，请尝试以下操作：

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

另一种解决方案是JavaScript window.scrollTo方法：

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

参数：

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

2017-09-11 10:37:41

TypeScript中的等效解决方案可能如下

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

2020-07-20 07:54:11

使用JavaScript滚动到页面顶部？

推荐文章

最新文章

标签