使用JavaScript滚动到页面顶部？

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

当前回答

您可以使用javascript的内置函数scrollTo：

函数滚动（）{window.scrollTo({顶部：0，行为：“平滑”});}<button onclick=“scroll”>滚动</button>

其他回答

如果你不需要更改动画，那么你就不需要使用任何特殊的插件——我只需要使用原生JavaScript window.scrollTo（）方法——传入0，0将立即将页面滚动到左上角。

window.scrollTo(xCoord, yCoord);

参数

xCoord是沿水平轴的像素。yCoord是沿垂直轴的像素。

<script>
$(function(){
   var scroll_pos=(0);          
   $('html, body').animate({scrollTop:(scroll_pos)}, '2000');
});
</script>

编辑：

$('html, body').animate({scrollTop:(scroll_pos)}, 2000);

另一种上下边距滚动方式：

window.scrollTo({ top: 100, left: 100, behavior: 'smooth' });

动机

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

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

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

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

这将接受href=“#top”的任何<a>标记，并使其平滑滚动到顶部。

document.getElementById（“elem”）scrollIntoView（）；

推荐文章