title: Javascript smooth scroll retain hash
body: <p>I'm doing a smooth scroll on my page. But the problem is the hash link is removed when I smooth scroll directly to its target section. I need to keep the hash when smooth scrolling to the page. Does anybody know how to do this?</p>
  <p>Here is my code</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('a[href*="#"]')
    .not('[href="#"]')
    .not('[href="#0"]')
    .click(function(event) {
  
      if (
        location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
        &amp;&amp; 
        location.hostname == this.hostname
      ) {
  
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
   
        if (target.length) {
  
          event.preventDefault();
          $('html, body').animate({
            scrollTop: target.offset().top 
          }, 1000, function() {
            var $target = $(target);
            $target.focus();
            if ($target.is(":focus")) { 
              return false;
            } else {
              $target.attr('tabindex','-1'); 
              $target.focus();
            };
          });
        }
      }
    });
  
  
    
    </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="btn-container"&gt;  
  &lt;ul&gt;
      &lt;li class="tab-btn"&gt;&lt;a class="smoothScroll" href="#stay"&gt;Stay&lt;/a&gt;&lt;/li&gt;
      |
      &lt;li class="tab-btn"&gt;&lt;a class="smoothScroll" href="#travel"&gt;Travel&lt;/a&gt;&lt;/li&gt;
      |
      &lt;li class="tab-btn"&gt;&lt;a class="smoothScroll" href="#promo"&gt;Promo&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="content-wrap" id="stay"&gt;
     &lt;p&gt; Lorem, ipsum dolor sit amet consectetur adipisicing elit. Amet accusantium nam aliquam temporibus perspiciatis reiciendis mollitia magni, soluta commodi debitis, culpa porro quibusdam iure harum totam. Itaque, reiciendis. Nisi, fugiat. &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="content-wrap" id="travel"&gt;
  &lt;p&gt; Lorem, ipsum dolor sit amet consectetur adipisicing elit. Amet accusantium nam aliquam temporibus perspiciatis reiciendis mollitia magni, soluta commodi debitis, culpa porro quibusdam iure harum totam. Itaque, reiciendis. Nisi, fugiat. &lt;/p&gt;
   &lt;/div&gt;
  
   &lt;div class="content-wrap" id="promo"&gt;
  &lt;p&gt; Lorem, ipsum dolor sit amet consectetur adipisicing elit. Amet accusantium nam aliquam temporibus perspiciatis reiciendis mollitia magni, soluta commodi debitis, culpa porro quibusdam iure harum totam. Itaque, reiciendis. Nisi, fugiat. &lt;/p&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>