页面滑动与锚点的“完美交互”

重点实现：

点击锚点，页面滑动到对应的位置，且锚点高亮
页面滑动时，滑动到指定位置时，对应的锚点高亮显示
锚点对应的内容块高度任意指定
特殊处理页面滑动到底部，确保最后一个锚点高亮显示
特殊需求，当某内容块为空，该内容块及对应的锚点均隐藏显示
复制代码

效果图

页面结构

<div id="rollWrap">
        <div class="content">
            <h1>
                <a href="#section1" class="cur-anchor">内容1</a>&nbsp;&nbsp;
                <a href="#section2">内容2</a>&nbsp;&nbsp;
                <a href="#no">内容空</a>
                <a href="#section3">内容3</a>&nbsp;&nbsp;
            </h1>
            <div class="other"></div>
            <div id="section1" class="section">内容1</div>
            <div id="section2" class="section">内容2</div>
            <div id="no">空</div>
            <div id="section3" class="section">内容3</div>
            <footer>
                底部
            </footer>
        </div>
    </div>
复制代码

js源码

    var clickflag = false; //标识是否点击锚点触发页面滚动
    var offsetHs = [0]; //页面滚动，对应锚点高亮范围值
    var navs = '';
    init();
    /*事件绑定*/
    $('#rollWrap a').click(function(){
        clickflag = true;
        $(this).addClass('cur-anchor').siblings().removeClass('cur-anchor');
        $('#rollWrap').animate({
            scrollTop: $($(this).attr('href')).offset().top + $('#rollWrap').scrollTop()
        },function(){
            clickflag = false;
        });
        return false; //地址栏不显示标识符 #xx
    });
    $('#rollWrap').on('scroll',function(){
        isLightAnchor($('#rollWrap').scrollTop())
    })

    /*初始化，当内容块的内容为空，隐藏对应的内容块及锚点*/
    function init(){
        //一系列操作，得知空内容块为 #no
        $('#no').remove();
        $('a[href=#no]').remove();
        navs = $('#rollWrap a');
        handleOffsetValue();
    }

    /*页面滚动，对应的锚点（动态锚点）高亮,偏移值计算*/
    function handleOffsetValue(){
        for(var i = 0;i < navs.length;i++){
            var divID = $(navs[i]).attr('href');
            //计算偏移量，必须一进入页面调用，否则$(divID).offset().top 为偏移之后的动态变化值
            offsetHs.push($(divID).offset().top+$(divID).get(0).offsetHeight*0.8);
        }
    }

    /*页面scroll,计算是否需要高亮锚点*/
    function isLightAnchor(scrollTop){
        for(var i = 0;i < navs.length; i ++){
            if(scrollTop>=offsetHs[i]&&scrollTop<offsetHs[i+1]){
                if (!clickflag) {
                    $($('#rollWrap a')[i]).addClass('cur-anchor').siblings().removeClass('cur-anchor');
                }
            }
        }
        //设置滚动到底部，确保最后一个锚点高亮
        if(scrollTop==$('.content').get(0).offsetHeight-$('#rollWrap').height()){
            $($('#rollWrap a')[navs.length-1]).addClass('cur-anchor').siblings().removeClass('cur-anchor');
        }
    }
复制代码

说明:

• 滚动容器里的元素，其offset().top是相对于容器顶部而言的，当页面发生滚动，该元素对应的offset().top值是动态改变的，可正可负;
• 设置某元素置于容器顶部，可设置容器的scrollTop = 当前的scrollTop+该元素的offset().top

css代码

html,body{
    height:100%;
    margin:0;
    padding:0;
}
div{
    margin: 0;
    padding: 0;
}
#rollWrap{
    height:100%;
    overflow-y: scroll;
}
.other{
    height:200px;
    background-image: url(./bg.jpg);
}
.section{
    color:black;
    font-size: 2em;
    text-align: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
#section1{
    height:500px;
    line-height: 500px;
    background-image: url(./bg1.jpg);
}
#section2{
    height:700px;
    line-height: 700px;
    background-image: url(./bg2.jpg);
}
#section3{
    height:200px;
    line-height: 200px;
    background-image: url(./bg3.jpg);
}
h1{
    right: 20px;
    top:0;
    position: fixed;
}
h1 a{
    color:#333;
    font-size: 16px;
    display: inline-block;
    padding: 5px;
    border: 1px solid #ccc;
}
.cur-anchor{
    background-color: #ccc;
}
footer{
    height:100px;
}
复制代码