爬楼梯

css代码

* {
    margin: 0;
    padding: 0;
}

#menu {
    position: fixed;
    top: 25%;
    left: 40px;
    width: 30px;
    border: 1px solid;
}

#menu ul li {
    position: relative;
    width: 30px;
    height: 30px;
    list-style: none;
    text-align: center;
    line-height: 30px;
    font-size: 12px;
    cursor: pointer;
    border-bottom: 1px dotted #AAAAAA;
}

#menu ul li.last {
    background: #ccc;
    color: black;
    border-bottom: none;
}

#menu ul li span {
    display: none;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 0;
    left: 0;
    color: red;
}

#menu ul li:hover span {
    display: block;
    background: darkred;
    color: white;
}

#menu ul li span.active {
    display: block;
    background: darkred;
    color: white;
}

#menu ul li:hover span.active {
    display: block;
    background: darkred;
    color: white;
}

#header,
#main,
#footer {
    margin: auto;
    width: 1000px;
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    line-height: 500px;
}

#main div {
    height: 700px;
    font-size: 50px;
    color: honeydew;
    line-height: 700px;
}

#header {
    height: 500px;
    background: #ccc;
}

#footer {
    height: 500px;
    background: #ccc;
}

html代码

 <div id="menu">
        <ul>
            <li>1F <span>服饰</span> </li>
            <li>2F <span>美妆</span> </li>
            <li>3F <span>手机</span> </li>
            <li>4F <span>家电</span> </li>
            <li>5F <span>数码</span> </li>
            <li>6F <span>运动</span> </li>
            <li>7F <span>居家</span> </li>
            <li>8F <span>母婴</span> </li>
            <li>9F <span>食品</span> </li>
            <li>10F <span>图书</span> </li>
            <li>11F <span>服务</span> </li>
            <li class="last">Top</li>
        </ul>
    </div>
    <div id="header">头部</div>
    <div id="main">
        <div class="Louti" style="background: #FF0000;">服饰</div>
        <div class="Louti" style="background: #FF7F00;">美妆</div>
        <div class="Louti" style="background: #FFFF00;">手机</div>
        <div class="Louti" style="background: #00FF00;">家电</div>
        <div class="Louti" style="background: #00FFFF;">数码</div>
        <div class="Louti" style="background: #0000FF;">运动</div>
        <div class="Louti" style="background: #8B00FF;">居家</div>
        <div class="Louti" style="background: aquamarine;">母婴</div>
        <div class="Louti" style="background: pink;">食品</div>
        <div class="Louti" style="background: bisque;">图书</div>
        <div class="Louti" style="background: lightgoldenrodyellow;">服务</div>
    </div>
    <div id="footer">尾部</div>
   

js代码

<script>
// 除了回到顶部 的li 添加 点击事件
$("#menu >ul>li:not(.last)").click(function() {
        // 当前 li 查找 span 
        $(this).find("span")
            // 添加 选中样式    
            .addClass("active")
            .end() // 回到 find 之前
            // 当前li 的 所有兄弟 li 查找 span
            .siblings().find("span")
            // 移除 span 上的样式
            .removeClass("active");
        // 获取 当前 li 所在ul 中 的 下标
        var index = $(this).index();
        // 楼层 对应 内容 的 div
        var div = $(".Louti").eq(index);
        // 获取 楼层内容 相对 页面顶部距离
        var divTop = div.offset().top;

        // $(document).scrollTop(divTop);
        $("body,html").animate({
            "scrollTop": divTop
        }, 1000)

    })
    // 回到顶部
$(".last").click(function() {
    $(document).scrollTop(0)
    $(this).siblings().find("span")
        .removeClass("active");
})

// 滑动 选楼层
$(document).scroll(function() {
    var sTop = $(this).scrollTop();
    var dom = $(".Louti").filter(function() {
        return Math.abs($(this).offset().top - sTop) < $(this).height() / 2
    })
    var f = dom.index();
    $("#menu >ul >li").eq(f).find("span").addClass("active")
    $("#menu >ul >li").eq(f).siblings().find("span").removeClass("active")
})
</script>