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

ここで読むことができます.animate()：http://api.jquery.com/animate/

于 2013-03-10T21:45:12.510 に答える