功能阐述:点击不同导航。滚动到不同内容区;
/*跳转锚点*/
handleClick(tab, event) {
let el = $('#' + this.activeName);
if(el.length !== 0){
var t = el.offset().top + $('.smartReview-right').scrollTop();
$('.smartReview-right').animate({scrollTop:t},500);
}
},
$(".smartReview-right").scroll(function(){ // 根据滚动判断当前应该是哪个锚点
var wScrollTop = $(".smartReview-right").scrollTop();
$('.smartReview-right>div').each((index,event)=>{
let el = $('.smartReview-right>div').eq(index);
var t = el.offset().top + $('.smartReview-right').scrollTop();
if(wScrollTop <= t){
me.activeName = el.attr('id');
return false; //找到第一个合适的就跳出终止。防止一直是最大的导航。
}
})
});
功能效果
企业微信截图_1588912042145.png
网友评论