用锚链接时,有时会有卡顿效果,这时 可不用锚链接这个方法,
思路:获取到想要跳转的标签,获得页面偏移数值,使用scrollTop滑动到该区域
<div class="y_hcdh_list">
<div><p>导航</p></div>
<div><a class="y_active" href="javascript:void(0);">11</a></div>
<div><a href="javascript:void(0);">22</a></div>
<div><a href="javascript:void(0);">33</a></div>
<div><a href="javascript:void(0);">44</a></div>
</div>
$('.y_list>div').not('.y_list>div:nth-child(1)').click(function(){
// 样式
$(this).children('a').addClass('y_active y_hover');
$(this).siblings().children('a').removeClass('y_active y_hover');
//过渡动画
let idNanme=['#11','#22','#33','#44'];
let index = $(this).index();
let scrolH = $(`${idNanme[index-1]}`).offset().top;
$('html,body').animate({scrollTop:`${scrolH}`},500);
})
网友评论