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

效果图

功能：类似这样，点击哪个，页面平滑滚到相应位置，同时页面滚动的时候，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~