Javascript平滑滚动保留散列

Question

我正在页面上进行平滑滚动。但问题是当我直接平滑滚动到其目标部分时，哈希链接被删除。当平滑滚动到页面时，我需要保留哈希值。有人知道该怎么做吗？

这是我的代码

$('a[href*="#"]')
  .not('[href="#"]')
  .not('[href="#0"]')
  .click(function(event) {

    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
      && 
      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();
          };
        });
      }
    }
  });


  
  

<div class="btn-container">  
<ul>
    <li class="tab-btn"><a class="smoothScroll" href="#stay">Stay</a></li>
    |
    <li class="tab-btn"><a class="smoothScroll" href="#travel">Travel</a></li>
    |
    <li class="tab-btn"><a class="smoothScroll" href="#promo">Promo</a></li>
</ul>
</div>

<div class="content-wrap" id="stay">
   <p> 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. </p>
</div>

<div class="content-wrap" id="travel">
<p> 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. </p>
 </div>

 <div class="content-wrap" id="promo">
<p> 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. </p>
 </div>

Answer 1

试试这个脚本：

$('a[href*="#"]')
.not('[href="#"]')
.not('[href="#0"]')
.click(function (event) {
    event.preventDefault();
    var hash = this.hash;
    $('html, body').animate({
        scrollTop: $(hash).offset().top
    }, 800, function () {
        window.location.hash = hash;
    });
});