jQuery按首字母检索查询跳转到文章内容代码免费下载

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>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录