Smooth Scroll to Top & Hide <div> Upon Click
<p>So I have it working perfectly when you click the "back to top" arrow, it hides the menu, but I just want it to do a smoothscroll to the top of the page upon click in addition to that.  You can test out what I currently have at <a href="http://rac.site44.com" rel="nofollow">http://rac.site44.com</a> just readjust the width so you are in a mobile view (its responsive) and click the top-right "menu" icon to see the arrow.</p>

<p>Here is the HTML</p>

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

<p>and the JS: (Obviously I'm assuming you just need a line of code telling it to scroll to top after the <code>$("li.top").click(function(e) {</code> but I can't seem to figure it out)</p>

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

<p>Thanks for the help!</p>
