javascript - 单击时平滑滚动到顶部并隐藏

Question

因此，当您单击“返回顶部”箭头时，它会完美地工作，它会隐藏菜单，但除此之外，我只想让它在单击时平滑滚动到页面顶部。您可以在 http://rac.site44.com 测试我目前拥有的内容。只需重新调整宽度，以便您处于移动 View (其响应式)中，然后单击右上角的“菜单”图标即可看到箭头。

这是 HTML

<div class="col_4 no-padding">
  <a href="/">
    <img class="logo" src="img/clear.gif" alt="RAC-Engineering - Structural Engineer Buffalo NY">
  </a>
  <a class="nav-toggle"><span class="mobile-nav-toggle mobile-only"></span></a>
  <a class="nav-toggle2 hidden"><span class="mobile-nav-toggle mobile-only"></span></a>
</div>
<div class="col_8 no-padding last">
  <nav id="nav" class="nav mobile-hide">
    <ul>
      <li><a href="#" class="active">Projects</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Links</a></li>
      <li><a href="#">Estimate</a></li>
      <li class="top mobile-only"><a href="#"></a></li>
    </ul>
  </nav>
</div>

和 JS:(显然我假设你只需要一行代码告诉它在 $("li.top").click(function(e) {) 之后滚动到顶部> 但我似乎无法弄清楚)

$(function() {
  $("li.top").click(function(e) {
    $("#nav").addClass('mobile-hide');
    $(".nav-toggle").removeClass('hidden');
    $(".nav-toggle2").addClass('hidden');
    e.preventDefault();
  });
});

感谢您的帮助!

Answer 1

我刚刚在您的网站上测试了这一点:

$("html, body").animate({ scrollTop: "0px" });

您可以在此处阅读有关 .animate() 的信息:http://api.jquery.com/animate/