美文网首页Web 前端开发
记录模拟a标签的锚链接,上下联动

记录模拟a标签的锚链接,上下联动

作者: 孙静静 | 来源:发表于2019-08-21 10:34 被阅读0次

    效果图



    功能:类似这样,点击哪个,页面平滑滚到相应位置,同时页面滚动的时候,tab栏能自动响应
    html代码


    image.png
    js代码
    var isLock = false;
        $(".title_group ul li").on("click",function(){
                isLock = true;
                $(".title_group ul li").removeClass("active");
                $(this).addClass("active");
                var index = $(this).index();
                var arrreduce = $(".scoll_con").eq(index).offset().top;
                // 为了防止在点击按钮的时候内容滚动按钮也跟着相应的改变状态,从而导致抖动效果
                $('html,body').animate({scrollTop: arrreduce - 90 +'px'}, 800,function(){
                    isLock=false;
                });
        })
    
        $(window).scroll(function() {
            if(!isLock){
                var scrollReduce = $(document).scrollTop();
                var reduce = $(".scoll_con").eq(0).offset().top - 110;
                var reduce2 = $(".scoll_con").eq(1).offset().top - 130;
                var reduce3 = $(".scoll_con").eq(2).offset().top - 180;
                if(scrollReduce >= reduce && scrollReduce<reduce2){
                    $(".title_group ul li").removeClass("active");
                    $(".title_group ul li").eq(0).addClass("active");
                }else if(scrollReduce>=reduce2 && scrollReduce<reduce3){
                    $(".title_group ul li").removeClass("active");
                    $(".title_group ul li").eq(1).addClass("active");
                }else if(scrollReduce>=reduce3){
                    $(".title_group ul li").removeClass("active");
                    $(".title_group ul li").eq(2).addClass("active");
                }
            }
        })
    

    就是这么简单,ending~

    相关文章

      网友评论

        本文标题:记录模拟a标签的锚链接,上下联动

        本文链接:https://www.haomeiwen.com/subject/vaxbsctx.html