0

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

这是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();
  });
});

谢谢您的帮助！

4

1 回答 1

3

我刚刚在您的网站上对此进行了测试：

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

你可以在这里阅读：http .animate(): //api.jquery.com/animate/

于 2013-03-10T21:45:12.510 回答