jQuery按首字母检索查询跳转到文章内容代码,类似手机通讯录列表首字母检索功能,相当于一个右侧悬浮导航菜单,手机端效果较好,PC端也可用。
js代码
<script src="js/jquery.min.js"></script>
<script src="js/resize.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var posT = $(".header").height()+$(".banner_one").height();
var overstepT = $(".term").height();
var heigtPt = overstepT-$(".term_nav").height();
var domH = $(".term_nav li").height();
var domY,moveY,index,item_top;
$(".term_nav").on({
touchstart: function (e) {
startY = e.originalEvent.targetTouches[0].pageY;
},
touchmove: function (e) {
e.preventDefault();
$("body").on({
touchmove: function (e) {
e.preventDefault();
}
});
domY = $(this).offset().top;
moveY = e.originalEvent.targetTouches[0].pageY;
index = parseInt((moveY-domY)/domH);
$(".term_nav li").eq(index).addClass("on").siblings().removeClass("on");
item_top=$('.term_box').eq(index).offset().top-100;
$(window).scrollTop(item_top);
},
touchend: function () {
$("body").off("touchmove")
}
});
$(".term_nav li").click(function(){
$(this).addClass("on").siblings().removeClass("on");
item_top = $('.term_box').eq($(this).index()).offset().top-100;
$(window).scrollTop(item_top)
})
$(window).scroll(function(){
if($(window).scrollTop()<=posT){
console.log("1")
$(".term_nav").css({
"position":"absolute",
"top":"0.3rem",
"transform": "translateY(0)",
})
}
else if(posT<$(window).scrollTop()){
console.log("2")
$(".term_nav").css({
"position":"fixed",
"top":"50%",
"transform": "translateY(-50%)",
})
}
$('.term_box').each(function(){
var $details_item_top=$('.term_box').eq($(this).index()).offset().top;
var cs = $(".term_box").eq($(this).index()).height();
console.log($details_item_top+" "+$(window).scrollTop())
if($details_item_top+cs-100>$(window).scrollTop()){
$('.term_nav li').removeClass('on');
$('.term_nav li').eq($(this).index()).addClass('on');
return false;
}
});
})
})
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791