原生js实现侧边导航滚动监听（不用锚点）

最新推荐文章于 2024-06-30 14:04:39 发布

原创最新推荐文章于 2024-06-30 14:04:39 发布 · 2.7k 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#js导航滚动监听 #js原生

一些demo 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现的侧边导航菜单与平滑页面滚动效果的方法。通过监听滚动事件，导航菜单项可以高亮显示当前页面部分，同时提供了返回顶部的功能。点击导航项会平滑滚动到对应页面区域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.效果图：

在这里插入图片描述

2.资源下载：下载地址

3.实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="wrap">
        <div style="background-color: #FFA3A6">part1</div>
        <div style="background-color: #BBD5A6">part2</div>
        <div style="background-color: #CD69A7">part3</div>
        <div style="background-color: #90C4E9">part4</div>
        <div style="background-color: #E79796">part5</div>
        <div style="background-color: #EE9C6A">part6</div>
        <div style="background-color: #F7DB70">part7</div>
    </div>
    <ul id="nav">
       <li class="on" id="top">1 part1</li>
       <li>2 part2</li>
       <li>3 part3</li>
       <li>4 part4</li>
       <li>5 part5</li>
       <li>6 part6</li>
       <li>7 part7</li>
    </ul>
    <div id="toTop">返回顶部</div>


    <script>
        window.onload = function () {
            var allDiv = document.querySelectorAll("#wrap div");
            var allNavLi = document.querySelectorAll("#nav li");
            /**
             * 滚动一定距离时，返回顶部按钮出现    滚动页面改变导航li的弹出
             */
            function toTopIcon() {
                window.onscroll = function () {
                    var d = document.documentElement.scrollTop || document.body.scrollTop;//获取滚动条高度
                    var viewd = document.documentElement.clientHeight;//获取可视区高度
                    var toTop = document.querySelector("#toTop");
                    if (d > viewd) {
                        toTop.className = "on";
                    } else {
                        toTop.className = "";
                    }
                    for (var i = 0; i < allDiv.length; i++) {
                        allDiv[i].index = i;
                        if (d >= allDiv[i].offsetTop && d < allDiv[i].offsetTop + 500) {
                            for (var j = 0; j < allDiv.length; j++) {
                                allNavLi[j].className = "";
                                allNavLi[i].className = "on";
                            }
                        }
                    }
                }
            }

            /**
             * 点击导航li  li弹出  页面跳转到相应div位置
             * scrollTo默认的是瞬间滚动到坐标位置，把behavior属性设置为smooth就可以支持平滑滚动了，不过缺点是无法设置滚动速率
             */
            function navLiPop() {
                for (var i = 0; i < allNavLi.length; i++){
                    allNavLi[i].index = i;
                    allNavLi[i].onclick = function () {
                        for (var j = 0; j < allNavLi.length; j++){
                            window.scrollTo({
                                top:allDiv[this.index].offsetTop,
                                behavior:"smooth"
                            });
                        }
                    }
                }
            }

            /**
             * 点击按钮回到顶部（定时器平滑滚动）
             */
            function navToTop() {
                var toTop = document.querySelector("#toTop");
                toTop.onclick = function() {
                    var timer = setInterval(toTop,10);
                    function toTop() {
                        var d = document.documentElement.scrollTop || document.body.scrollTop;
                        d -= 80;
                        if(d > 0){
                            window.scrollTo(0,d);
                        }else {
                            window.scrollTo(0,0);
                            clearInterval(timer);
                            for (var i = 0; i < allNavLi.length; i++){
                                allNavLi[i].index = i;
                                for (var j = 0; j < allNavLi.length; j++){
                                    allNavLi[j].className = "";
                                    allNavLi[0].className = "on";
                                }
                            }
                        }
                    }
                }
            }
            navLiPop();
            toTopIcon();
            navToTop();
        }
    </script>

    
    <style>
        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, embed,
        figure, figcaption, footer, header, hgroup,
        menu, nav, output, ruby, section, summary,
        time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }
        /* HTML5 display-role reset for older browsers */
        article, aside, details, figcaption, figure,
        footer, header, hgroup, menu, nav, section {
            display: block;
        }
        body {
            line-height: 1.5;
        }
        ol, ul {
            list-style: none;
        }
        blockquote, q {
            quotes: none;
        }
        blockquote:before, blockquote:after,
        q:before, q:after {
            content: '';
            content: none;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        #wrap{
            width: 100%;
        }
        #wrap div{
            width: 100%;
            height: 500px;
            color: #ffffff;
            font-size: 20px;
            text-align: center;
        }
        #nav{
            position: fixed;
            right: -34px;
            bottom: 97px;
        }
        #nav li{
            width: 167px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            color: #ffffff;
            margin-bottom: 5px;
            background: url("images/side-nav-bg.jpg") no-repeat;
            cursor: pointer;
            transition: all 0.2s ease;
            -webkit-transition: all 0.2s ease;
            -moz-transition: all 0.2s ease;
        }
        #nav li.on{
            transform: translate(-34px);
            -webkit-transform: translate(-34px);
            -moz-transform: translate(-34px);
        }
        #toTop{
            width: 167px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            color: #ffffff;
            margin-bottom: 5px;
            background: url("images/side-nav-bg.jpg") no-repeat;
            cursor: pointer;
            position: fixed;
            right: -34px;
            bottom: 60px;
            opacity: 0;
            transition: opacity 0.2s ease;
            -webkit-transition: opacity 0.2s ease;
            -moz-transition: opacity 0.2s ease;
        }
        #toTop.on{
            opacity: 1;
        }
    </style>
</body>
</html>