滚动仅在第二次单击时起作用

问题描述

我制作了一个脚本，但是滚动位置只有在第二次单击后才能正常工作。

$('a[href^="#"]').on('click',function (e) {
  e.preventDefault();
  $(document).off("scroll");
  var target = this.hash,menu = target;
  $target = $(target);
  var $scrollTop = $target.offset().top-55;  
  $('html,body').stop().animate({scrollTop: $scrollTop},100,'swing',function () {
    window.location.hash = target;
    $(document).on("scroll");
  }); 
});

谢谢

https://codepen.io/murdokland/pen/WNwvLrM

解决方法

更好地使用href属性，更方便地获取哈希值

$(document).ready(function (){
  $('a[href^="#"]').on('click',function (e) {
    var hash = $(this).attr('href').split('#')[1];
    console.log(hash);
    $('html,body').stop(true,true).animate({
        scrollTop: $('#' + hash).offset().top
    },1000);
    e.preventDefault();
  });
});

#header{
  height:30px;
}  
.block {
  height:200px;
  background-color : #CCC;
}
div#headerMenuLieux {
    position: sticky;
    top: 0;
    background-color : #FFF222;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
</div>
<div id="headerMenuLieux">
  <div id="menuLieux">
    <ul id="menu-lieux-etape-activite-hebergement">
      <li>
        <a href="#etape">ÉTAPE</a>
      </li>
      <li>
        <a href="#activite">ACTIVITÉS</a>
      </li>
      <li>
        <a href="#hebergement">HÉBERGEMENTS</a>
      </li>
     </ul>  
  </div>  
</div>
<div id="etape" class="block">
  <h2>ÉTAPE</h2>
</div>
<div id="activite" class="block">
  <h2>ACTIVITÉS</h2>
</div>
<div id="hebergement" class="block">
  <h2>HÉBERGEMENTS</h2>
</div>