简易网站锚点布局-CFANZ编程社区

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2987145_a8y2jhno32.css">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body>div,
    body>ul {
        width: 1200px;
        margin: 0 auto;
    }

    body>div {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 40px;
        color: #fff;
    }

    .header {
        background-color: skyblue;
        height: 60px;
    }

    .top {
        height: 100px;
        background-color: pink;
    }

    .banner {
        height: 300px;
        background-color: springgreen;
    }

    .footer {
        height: 400px;
        background-color: skyblue;
    }

    ol,
    ul,
    li {
        list-style: none;
    }

    li>.title {
        height: 60px;
        font-size: 30px;
        font-weight: 700;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    li>.content {
        height: 600px;
        background-color: orange;
        color: #fff;
        font-size: 30px;
        font-weight: 700;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    ol {
        width: 51px;
        height: 300px;
        border-right: 1px solid #333;
        border-top: 1px solid #333;
        position: fixed;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
    }

    ol>li,
    ol>span {
        width: 50px;
        height: 50px;
        border-left: 1px solid #333;
        border-bottom: 1px solid #333;
        font-size: 20px;
        line-height: 25px;
        text-align: center;
        cursor: pointer;
        position: relative;
    }

    ol>li {
        z-index: 999;
        background-color: #fff;
    }

    ol>span {
        /* border: 1px solid #333; */
        border: none;
        position: absolute;
        /* background-color: red; */
        color: #000;
        left: 0;
        bottom: 0;
        z-index: 0;
        line-height: 50px;
        text-align: center;
        font-size: 50px !important;
    }

    ol>li.active {
        background-color: skyblue;
        color: #fff;
    }
</style>

<body>
    <div class="header">网页头部</div>
    <div class="top">顶部搜索和logo</div>
    <div class="banner">轮播图</div>
    <ul>
        <li name="pindao">
            <p class="title">频道广场</p>
            <div class="content"></div>
        </li>
        <li>
            <p class="title">为你推荐</p>
            <div class="content"></div>
        </li>
        <li>
            <p class="title">特色优选</p>
            <div class="content"></div>
        </li>
        <li>
            <p class="title">京东秒杀</p>
            <div class="content"></div>
        </li>
        <li>
            <p class="title">最近热销</p>
            <div class="content"></div>
        </li>
        <li>
            <p class="title">反馈</p>
            <div class="content"></div>
        </li>
    </ul>
    <div class="footer">网页底部</div>
    <ol>
        <li to="pindao" class="active">频道广场</li>
        <li>为你推荐</li>
        <li>特色优选</li>
        <li>京东秒杀</li>
        <li>最近热销</li>
        <li>反馈</li>
        <span class="iconfont icon-huidaodingbu"></span>
    </ol>
</body>

<script src =" https://code.jquery.com/jquery-3.6.0.min.js "></script>
<script>

    let flag = true
    // 点击导航按钮，去到相应楼层
    $('ol>li').click(function () {
        //给点击的添加active类名，给其他的兄弟元素删除类名
        $(this).addClass('active').siblings().removeClass('active')
        //定位点击对应的li距离页面的尺寸
        const li_top = $('ul>li').eq($(this).index()).offset().top
        // console.log(li_top);
        // 页面跳转
        $('html,body').stop().animate({
            scrollTop: li_top
        })
    })

    // 随着滚动条的滚动，让对应导航添加类名
    $(window).scroll(function () {
        const scroll_top = document.documentElement.scrollTop || document.body.scrollTop

        //判断滚动距离超过那个li了
        //用ul下的每一个li一次去比较
        $('ul>li').each(function (index, item) {
            // console.log(item);
            //进行判断
            if (scroll_top >= $(item).offset().top) {
                $('ol>li').eq(index).addClass('active').siblings().removeClass('active')
            }
        })


        //判断滚动的距离，决定回到顶部是否出现
        if (scroll_top >= 500) {
            //判断开关的状态
            if (!flag) return
            flag = false
            $('ol>span').animate({ bottom: '-58px' }, 150, () => flag = true)
        } else {
            if (!flag) return
            flag = false
            $('ol>span').animate({ bottom: 0 }, 150, () => flag = true)
        }
    })
    $('ol>span').hover(function(){
        $(this).css('color','red')
    })
    // 回到顶部
    $('ol>span').click(() => {
        $('html,body').animate({ scrollTop: 0 })
    })
</script>

</html>