jQuery - 页面楼梯导航实例

var $jds = $(".louceng .jd");
var $lis = $(".subnav ul li");

var arr = [];
$jds.each(function(i){
    arr[i] = $(this).offset().top;
})

$(document).scroll(function(){
    var v = $(this).scrollTop();

    // 到合适的位置出现楼梯导航
    if(v>arr[0]){
        $(".subnav").show();
    } else {
        $(".subnav").hide();
    }

    // 在滚动过程中，需要判断处于哪个楼层
    // 让对应的导航的 li 标签高亮显示，其他的默认
    $jds.each(function(i){
        if(v>arr[i]){
            $lis.eq(i).addClass("current")
            .siblings().removeClass("current");
        }
    })
})

//点击电梯导航到相应的页面
$lis.click(function(){
    var idx = $(this).index();
    $("html,body").animate({"scrollTop":arr[idx]},500);
})

jQuery - 页面楼梯导航实例

原文：https://www.cnblogs.com/charonmomo/p/15186386.html