title: Changing URL hash value when one page scrolling menu is clicked
body: <p>I have a one page scrolling script. </p>
  
  <pre><code>&lt;script&gt;
              $(function() {
                  $('.nav li a').bind('click',function(event){
                      var $anchor2 = $(this).parent();
                      var $anchor = $(this);
                      $('.nav  li').removeClass('active');
                      $anchor2.addClass('active');
  
  
                      $('html, body').stop().animate({
                          scrollTop: $($anchor.attr('href')).offset().top - 50
                      }, 1500,'easeInOutExpo');
  
                      event.preventDefault();
                  });
              });
          &lt;/script&gt; 
  </code></pre>
  
  <p>The above script works perfect. But the typical URL in the address bar as follows</p>
  
  <pre><code>example.com/index.html
  example.com/index.html#about
  example.com/index.html#contact
  </code></pre>
  
  <p>I would like to change this URL to something more neat and usable like</p>
  
  <pre><code>example.com/about
  example.com/contact
  </code></pre>
  
  <p>If the above URL accessed directly, It should be in the same scroll position. How can we do it in jQuery?</p>