title: 1 Page site, change url and active nav depending on what part of the page you are at
body: <p>I'm messing around with trying to create a one page website, just to test it out. </p>
  
  <p>Currently it is working so that clicking the nav links will scroll to certain part of pages, changes the url to include the id to page, and also changes the active tab css to active. </p>
  
  <p>Though it is working when clicking on the nav menu buttons, I'm unable to get the url to change (eg, index.html > index.html#page1) and the active tab to apply active css style when scrolling through the page. </p>
  
  <p>I've had a look around and can't get this to work.</p>
  
  <pre><code>&lt;body&gt;
  &lt;nav class="nav-bar"&gt;
      &lt;ul&gt;
          &lt;li class="top active"&gt;Top&lt;/li
          &gt;&lt;li class="page1"&gt;Menu1&lt;/li
          &gt;&lt;li class="page2"&gt;Menu2&lt;/li
          &gt;&lt;li class="page3"&gt;Menu3&lt;/li
          &gt;&lt;li class="page4"&gt;Menu4&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
      &lt;div id="top"&gt;&lt;/div&gt;
      &lt;div id="page1"&gt;&lt;/div&gt;
      &lt;div id="page2"&gt;&lt;/div&gt;
      &lt;div id="page3"&gt;&lt;/div&gt;
      &lt;div id="page4"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>js</p>
  
  <pre><code>$(document).ready(function(){
      $("nav ul li").click(function(){
          var sectionId = $(this).attr('class')
          var sectionClass = $(this).attr('class')
          $('.active').removeClass('active');                                 /// Highlight on click
          $('.'+sectionClass).addClass('active');
          $('html, body').animate({                                           /// Scroll on click
              scrollTop: $("#"+sectionId).offset().top},'slow');
          window.location.href = "index.html" + "#" + sectionId;
      });
  
  });
  </code></pre>