title: Scroll element to top of page by clicking anchor inside element or anywhere inside containing div id
body: <p>I would like to scroll the page to the top of the e.g. navigation div ID when clicking either any of the links inside the navigation div ID or (if possible) when clicking anywhere into the div ID itself containing the navigation links.</p>
  
  <p>I have researched this and the closest I have come to is <a href="https://stackoverflow.com/questions/8355673/jquery-how-to-scroll-an-anchor-to-the-top-of-the-page-when-clicked">jQuery - How to scroll an anchor to the top of the page when clicked?</a> however for some reason it does not seem to work when I try to do this in my example. What am I doing wrong? </p>
  
  <p>I am new to jQuery and medium at html and css (and used inline styling of the divs since I did not want to supply a separate css just for the example).</p>
  
  <p>When I load the html and script from <a href="https://stackoverflow.com/questions/8355673/jquery-how-to-scroll-an-anchor-to-the-top-of-the-page-when-clicked">jQuery - How to scroll an anchor to the top of the page when clicked?</a> in Aptana it also does not scroll. Even with a content div above the div class work so that there is space to scroll to at all.</p>
  
  <p>I have included two little paragraphs inside the concerning divs to explain exactly what I mean.</p>
  
  <p>Any help is very much appreciated. Thank you.</p>
  
  <p> </p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
          $('#scroll_navigation ul li').click(function() {
               $('html,body').animate({scrollTop: $(this).offset().top}, 800);
          }); 
      &lt;/script&gt;
  
  &lt;body&gt;
  
  &lt;div id="logo" style="margin: 0 auto; height: 300px; width: 60%; border: 1px solid #000"&gt;Logo&lt;/div&gt;
  
      &lt;div id="scroll_navigation" style="margin: 0 auto; width: 40%; border: 4px solid #225599"&gt;
  
          &lt;p&gt;Scroll navigation to top of page&lt;/p&gt;
          &lt;p&gt;Catch any clicks in "#scroll_navigation" to scroll the div id to the top of the page&lt;/p&gt;
  
  
              &lt;div id="navigation"&gt;
  
                  &lt;div class="container" style="margin: 0 auto; height: 220px; width: 60%; border: 1px solid #000"&gt;
  
                      &lt;ul&gt;
                          &lt;p&gt;Catch clicks on anchors to scroll the div id to the top of the page&lt;/p&gt;
                          &lt;li&gt;&lt;a href="#Portfolio" title=""&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#Services" title=""&gt;Services&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#About" title=""&gt;About&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#Contact" title=""&gt;Contact&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
  
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;div id="content" style="margin: 0 auto; height: 1500px; width: 60%; border: 1px solid #000"&gt;Content&lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>EDIT</strong>
  Beware this when using scrollTop in Firefox.
  <a href="https://stackoverflow.com/questions/8149155/animate-scrolltop-not-working-in-firefox?rq=1">Animate scrollTop not working in firefox</a>
  <a href="https://stackoverflow.com/questions/11288993/jquery-scrolltop-no-support-for-negative-values-in-mozilla-firefox">jQuery scrollTop - no support for negative values in Mozilla / Firefox</a>
  Took me a while to figure out my code was fine but scrollTop was this issue in FF. In this same example the behaviour can also be observed. When scrolling down and making the anchors fixed, FF will scroll up to random positions either 2-4px before or after the target div.</p>
  
  <p>I am now using Scrolld.js to achieve pixel perfect scrolling to the desired points across major browsers. I don't understand how different browser engines can render such a common thing as scrollTop from different (either html or body) inputs as far as I understand and I am new to jQuery. Guess this is not "the fault" of jQuery but how the browser engines render scrollTop. </p>