使用JavaScript做网页定位导航特效（上）_点击左边不同选项,浏览器网址不变,只有右侧红框内的内容变化,如何定位右侧出来的-优快云博客

本文链接：https://blog.youkuaiyun.com/WJM_Aunt/article/details/78004209

本文介绍了如何使用JavaScript创建一种网页定位导航特效：左侧内容滚动时，右侧导航菜单保持固定；点击导航链接，左侧内容会定位到相应栏目。文章重点讨论了锚点、滚动条定位的事件和方法，并详细讲解了HTML、CSS及JavaScript的代码实现，包括getByClassName、addClass和removeClass等函数的使用。最后预告下节将展示jQuery实现的同类效果。

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

网页定位导航特效（上）

一、特效分析

左侧是内容，右侧是悬浮的导航菜单，左侧滚动时，右侧内容不改变位置；点击右侧链接，左侧定位到相应栏目，左侧滚动到相应栏目，右侧定位到对应链接。

重难点：

左侧栏目和右侧导航菜单的显示样式实现
导航与滚动条之间的定位关联

这里写图片描述

二、特效设计

技术点：

锚点（anchor）—网页制作中超链接的一种，页面内的超级链接
关于滚动条定位的事件和方法

1、onscroll：当用户滚动指定的元素时，会发生滚动（scroll）事件，适用于所有可滚动的元素和window对象（浏览器窗口）。

(1)当页面滚动条变化时，执行函数：
    window.onscroll = function(){}

(2)document.documentElement.scrollTop || document.body.scrolltop:
    获取/设置匹配元素相对滚动条里顶部的偏移

2、offset：获取匹配元素的相对偏移。（offsetTop、offsetLeft）

返回的是一个值

三、代码实现

1、html样式

<body>
    <div id="menu">
        <ul>
            <li><a href="#item1" class="current">1F 男装</a></li>
            <li><a href="#item2">2F 女装</a></li>
            <li><a href="#item3">3F 美妆</a></li>
            <li><a href="#item4">4F 数码</a></li>
            <li><a href="#item5">5F 母婴</a></li>
        </ul>
    </div>
    <div id="content">
        <h1>地狗购物网</h1>
        <div id="item1" class="item">
            <h2>1F 男装</h2>
            <ul>
                <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20170916151344792"/></a></li>
                <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20170916151344792"/></a></li>
                <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20170916151344792"/></a></li>
                <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20170916151344792"/></a></li>
                <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20170916151344792"/></a></li>
                <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20170916151344792"/></a></li>
                <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20170916151344792"/></a></li>
                <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20170916151344792"/></a></li>
                <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20170916151344792"/></a></li>
            </ul>
        </div>
        <div id="item2" class="item">
            <h2>2F 女装</h2>
            <ul>
                <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20170916151508391"/></a></li>
                <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20170916151508391"/></a></li>
                <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20170916151508391"/></a></li>
                <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20170916151508391"/></a></li>
                <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20170916151508391"/></a></li>
                <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20170916151344792"/></a></li>
                <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20170916151508391"/></a></li>
                <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20170916151508391"/></a></li>
                <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20170916151508391"/></a></li>
            </ul>
        </div>
        <div id="item3" class="item">
            <h2>3F 美妆</h2>
            <ul>
                <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20170916151635652"/></a></li>
                <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20170916151635652"/></a></li>
                <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20170916151635652"/></a></li>
                <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20170916151635652"/></a></li>
                <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20170916151635652"/></a></li>
                <li><a href="#"><img src="https://img-blog.youkuaiyun.com/20170916151635652"</