title: jquery: hashchange, prevent jumping to hash
body: <p>I have a hashchange function set up to show/hide different sections of an about page without having 7 separate pages. This all works fine, great infact, there's just one small thing that's bothering me, when the relevant content is shown on screen, eg: <code>#about01</code> if you click on the menu button again the browser jumps down to the top of this div, which I don't want to happen.<br>
  Here's my jQuery:</p>
  
  <pre><code>jQuery(document).ready(function(){
  
      jQuery(window).on('hashchange', function(){
          var hashFound = determineContent();
          if(hashFound) return false;
      });
  
      function determineContent(){
  
          var hash = window.location.hash;
          jQuery('.about').hide();
  
          jQuery('.sub-menu').each(function(){
  
               if (jQuery(this).attr('hook') === hash.replace('#about', '')) {
                 jQuery('#about'+jQuery(this).attr('hook')).fadeIn();
                   return true;
               }
          });
  
          jQuery('html, body').animate({scrollTop:0}, 'slow');
          return false;
      }
  
      determineContent();
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="sub-menu"&gt;
          &lt;li id="sub-menu-01" class="sub-menu" hook="01"&gt;&lt;a href="#about01"&gt;TEST&lt;/a&gt;&lt;/li&gt;
          &lt;li id="sub-menu-02" class="sub-menu" hook="02"&gt;&lt;a href="#about02"&gt;TEST&lt;/a&gt;&lt;/li&gt;
          &lt;li id="sub-menu-03" class="sub-menu" hook="03"&gt;&lt;a href="#about03"&gt;TEST&lt;/a&gt;&lt;/li&gt;
          &lt;li id="sub-menu-04" class="sub-menu" hook="04"&gt;&lt;a href="#about04"&gt;TEST&lt;/a&gt;&lt;/li&gt;
          &lt;li id="sub-menu-05" class="sub-menu" hook="05"&gt;&lt;a href="#about05"&gt;TEST&lt;/a&gt;&lt;/li&gt;
          &lt;li id="sub-menu-06" class="sub-menu" hook="06"&gt;&lt;a href="#about06"&gt;TEST&lt;/a&gt;&lt;/li&gt;
          &lt;li id="sub-menu-07" class="sub-menu" hook="07"&gt;&lt;a href="#about07"&gt;TEST&lt;/a&gt;&lt;/li&gt;
      &lt;/div&gt;
  
  &lt;div id="about01" class="about"&gt;CONTENT HERE
  &lt;/div&gt;
  
  &lt;div id="about02" class="about"&gt;CONTENT HERE
  &lt;/div&gt;
  
  &lt;div id="about03" class="about"&gt;CONTENT HERE
  &lt;/div&gt;
  
  &lt;div id="about04" class="about"&gt;CONTENT HERE
  &lt;/div&gt;
  
  &lt;div id="about05" class="about"&gt;CONTENT HERE
  &lt;/div&gt;
  
  &lt;div id="about06" class="about"&gt;CONTENT HERE
  &lt;/div&gt;
  
  &lt;div id="about07" class="about"&gt;CONTENT HERE
  &lt;/div&gt;
  </code></pre>
  
  <p>Like I say, if <code>#about01</code> is shown, and the user then clicks on <code>#sub-menu-01</code> again, the window scrolls down to the top of this div, as is the normal behaviour for hashes in url's. Is the a way to prevent the default behaviour and not scroll to the top of this div on the click?<br>
  Also, I'm trying to figure out if there's a way to show <code>#about01</code> on the page load of <code>www.website.com/about</code> instead of having to put in <code>www.website.com/about/#about01</code> etc?</p>