网页滚动导航：一键跳转的实现

要完成的功能

1.显示/隐藏电梯导航

2.当页面滚动到某个区域时，左侧电梯导航小 li添加类 兄弟移出类

3.点击电梯导航滚动到相应的内容区域

index.js代码实现(含所有注释)

// 当文档加载完毕时执行以下代码
$(function(){
    // 定义一个变量flag 初始值为true
    var flag=true
    // 获取.recommend元素的顶部距离文档顶部的距离
    var toolTop=$(".recommend").offset().top
    // 调用toggle函数
    toggle()
    // 定义一个函数toggle 用于控制 .fixedtool 元素的显示和隐藏
    function toggle(){
        // 如果滚动条滚动的距离 >= .recommend元素顶部 距离 文档顶部的距离
         if($(document).scrollTop()>=toolTop){
            // 显示淡入 .fixedtool元素
        $(".fixedtool").fadeIn()
    }else{
            // 否则淡出 .fixedtool元素 
        $(".fixedtool").fadeOut()
    }
    }

    // 给window绑定一个滚动事件 当滚动条滚动时执行以下代码
    $(window).scroll(function(){
        // 调用toggle函数
        toggle()
        // 如果flag为true
        if(flag){
            // 遍历 .floor 元素下的每个 .w 元素
            $(".floor .w").each(function(i,e){
            console.log(i,e);// 打印每个.w元素的索引和元素本身
            // 如果滚动条滚动的距离 >= 当前 .w 元素的顶部 距离 文档顶部的距离
            if($(document).scrollTop()>=$(e).offset().top){
            // 则将对应的 .fixedtool 下的li元素添加current类,其他li元素移除current类
            $(".fixedtoolli").eq(i).addClass("current").siblings().removeClass("current")
            } 
        })
        }     
    })

    // 定义一个点击事件 当.fuxedtool下的li元素被点击时执行以下代码
    $(".fixedtool li").click(function(){
        // 将flag设置为false
        flag=false
        // 打印被点击的li元素的索引
        console.log($(this).index());
        // 获取被点击的li元素对应的 .w 元素的顶部 距离 文档顶部的距离
       var current= $(".floor .w").eq($(this).index()).offset().top+10
       // 打印current的值
       console.log(current);
       // 停止之前的动画 然后执行新的动画
    $("html,body").stop().animate({
        // 滚动条滚动到 current 指定的位置
        scrollTop:current
    },function(){
        // 动画完成后将flag设置为true
        flag=true 
    })
    // 被点击的li元素添加current类 其他元素移出current类
    $(this).addClass("current").siblings().removeClass("current")
    })

})

效果图 

  

 如果注释没有看懂，下面我会用简单易懂的方式解释这段代码：

初始化：

        当页面加载完成后，执行以下代码。

定义变量：

        flag：一个布尔值，用来控制是否允许执行滚动和点击事件的逻辑。

获取元素位置：

        toolTop：获取页面上 .recommend 元素距离页面顶部的距离。

定义 toggle 函数：

        这个函数用来控制 .fixedtool（工具栏）的显示和隐藏。

        如果页面滚动到 .recommend 元素的位置或以下，显示工具栏；否则，隐藏工具栏。

滚动事件：

当用户滚动页面时，会触发以下操作：

        调用 toggle 函数，根据当前滚动位置显示或隐藏工具栏。

如果 flag 为 true（默认允许状态），则执行以下操作：

        遍历所有 .floor .w 元素，这些元素代表页面的各个部分。

        如果当前滚动位置已经到达或超过某个 .floor .w 元素的位置，就在工具栏上对应的按钮添加 current 类，表示当前选中状态，同时移除其他按钮的 current 类。

点击工具栏按钮：

当用户点击工具栏上的按钮时，会触发以下操作：

        设置 flag 为 false，表示正在执行点击事件，暂时不响应滚动事件。

        打印出被点击按钮的索引。

        计算出对应 .floor .w 元素距离页面顶部的距离，并稍微向下偏移10像素，得到跳转的目标位置。

        使页面平滑滚动到目标位置。

        在滚动动画完成后，将 flag 重新设置为 true，允许响应滚动事件。

        给被点击的按钮添加 current 类，表示当前选中状态，同时移除其他按钮的 current 类。

       

上面有没有index.js的源文件，可以用来试试手