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


当前回答

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

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

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

其他回答

你可以尝试在这个Fiddle中使用JShttp://jsfiddle.net/5bNmH/1/

在页脚中添加“转到顶部”按钮:

<footer>
    <hr />
    <p>Just some basic footer text.</p>
    <!-- Go to top Button -->
    <a href="#" class="go-top">Go Top</a>
</footer>

尝试此操作以在顶部滚动

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

动机

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

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

这样做不需要jQuery。一个标准的HTML标记就足够了。。。

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

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

如果您想滚动到具有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;
    });
});``