如何解决滚动仅在第二次单击时起作用
我制作了一个脚本,但是滚动位置只有在第二次单击后才能正常工作。
$('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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。