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


当前回答

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

其他回答

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

window.scrollTo(xCoord, yCoord);

参数

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

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

   $(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一键制作一件事情的动画,而不使用动画制作另一件事情时?即打开页面顶部的管理登录面板中的幻灯片,然后立即跳到顶部查看。

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

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

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

旧的#top可以做到这一点

document.location.href = "#top";

适用于FF、IE和Chrome

使用简单的css尝试这个解决方案,只需将css滚动行为:在html和body上平滑,就像我在css中应用的那样。就是这样

document.querySelector('a').onclick=函数(){window.srollTo(0,0)}html,正文{滚动行为:平滑;}一个{背景色:红色;颜色:#fff;边界半径:10px;边距:10px 0;显示:内联块;填充:10px 20px;}<p>自从1500年代以来,Lorem Ipsum就一直是行业的标准伪文本,当时一位不知名的印刷商拿着一把打字机,把它弄乱,做成了一本打字样本书。它不仅存活了五个世纪,而且跨越了电子排版,基本保持不变。20世纪60年代,随着包含Lorem Ipsum段落的Letraset页的发布,以及最近的桌面出版软件Aldus PageMaker(包括Lorem Ipsum版本)的推出,它开始流行</p> <p>自从15世纪以来,Lorem Ipsum一直是行业的标准伪文本,当时一个不知名的打印机拿着一盘打字机,将其打乱,制成一本打字样本书。它不仅存活了五个世纪,而且跨越了电子排版,基本保持不变。20世纪60年代,随着包含Lorem Ipsum段落的Letraset页的发布,以及最近的桌面出版软件Aldus PageMaker(包括Lorem Ipsum版本)的推出,它开始流行</p> <p>自从15世纪以来,Lorem Ipsum一直是行业的标准伪文本,当时一个不知名的打印机拿着一盘打字机,将其打乱,制成一本打字样本书。它不仅存活了五个世纪,而且跨越了电子排版,基本保持不变。20世纪60年代,随着包含Lorem Ipsum段落的Letraset页的发布,以及最近的桌面出版软件Aldus PageMaker(包括Lorem Ipsum版本)的推出,它开始流行</p> <p>自从15世纪以来,Lorem Ipsum一直是行业的标准伪文本,当时一个不知名的打印机拿着一盘打字机,将其打乱,制成一本打字样本书。它不仅存活了五个世纪,而且跨越了电子排版,基本保持不变。20世纪60年代,随着包含Lorem Ipsum段落的Letraset页的发布,以及最近的桌面出版软件Aldus PageMaker(包括Lorem Ipsum版本)的推出,它开始流行</p> <p>自从15世纪以来,Lorem Ipsum一直是行业的标准伪文本,当时一个不知名的打印机拿着一盘打字机,将其打乱,制成一本打字样本书。它不仅存活了五个世纪,而且跨越了电子排版,基本保持不变。20世纪60年代,随着包含Lorem Ipsum段落的Letraset页的发布,以及最近的桌面出版软件Aldus PageMaker(包括Lorem Ipsum版本)的推出,它开始流行</p> <p>自从15世纪以来,Lorem Ipsum一直是行业的标准伪文本,当时一个不知名的打印机拿着一盘打字机,将其打乱,制成一本打字样本书。它不仅存活了五个世纪,而且跨越了电子排版,基本保持不变。20世纪60年代,随着包含Lorem Ipsum段落的Letraset页的发布,以及最近的桌面出版软件Aldus PageMaker(包括Lorem Ipsum版本)的推出,它开始流行</p><a>滚动到顶部</a>

我希望这对你有很大帮助。请告诉我你的想法