导航 滚动到对应位置

最新推荐文章于 2024-04-28 17:47:43 发布
最新推荐文章于 2024-04-28 17:47:43 发布
阅读量145 收藏
点赞数 1
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yeee1128/article/details/103620855
版权 



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{padding: 0;margin: 0;list-style: none;}
        body{font-size: 12px;line-height: 1.7;}
        #content{width: 800px;padding: 20px;margin: 0 auto;}
        #content h1{color: #0088bb;}
        .item{border: 1px dotted #08b;padding: 20px;margin-bottom: 20px;}
        .item h2{font-size: 16px;font-weight: bold;border-bottom: 2px solid #08b;margin-bottom: 10px;}
        .item li{display: inline;margin-right: 10px;}
        .item img{width: 240px;height: 230px;}

        #list{position: fixed;  top:100px;left: 50%;margin-left: 400px;width: 50px;}
        #list a{display: block;width:80px;height:50px;color: #333;text-decoration: none;font:bold 14px/50px "微软雅黑";text-align: center; }
        #list a:hover,#list a.active{background: #08b;color: white;}
    </style>
   
</head>
<body>
<ul id="list">
    <li><a href="#item1" class="active">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 id="content">
    <h1>网页导航特效</h1>
    <div id="item1" class="item">
        <h2>1F 男装</h2>
        <ul>
            <li><a href="#"><img src="images/1F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""></a></li>
        </ul>
    </div>
    <div id="item2" class="item">
        <h2>2F 女装</h2>
        <ul>
            <li><a href="#"><img src="images/2F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/2F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/2F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/2F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/2F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/2F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/2F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/2F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/2F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/2F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/2F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/2F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/2F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/2F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/2F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/2F.jpg" alt=""></a></li>
        </ul>
    </div>
    <div id="item3" class="item">
        <h2>3F 美妆</h2>
        <ul>
            <li><a href="#"><img src="images/3F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/3F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/3F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/3F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/3F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/3F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/3F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/3F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/3F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/3F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/3F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/3F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/3F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/3F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/3F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/3F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/3F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/3F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/3F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/3F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/3F.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/3F.jpg" alt=""></a></li>
        </ul>
    </div>
    <div id="item4" class="item">
        <h2>4F 数码</h2>
        <ul>
            <li><a href="#"><img src="images/4F.png" alt=""></a></li>
            <li><a href="#"><img src="images/4F.png" alt=""></a></li>
            <li><a href="#"><img src="images/4F.png" alt=""></a></li>
            <li><a href="#"><img src="images/4F.png" alt=""></a></li>
            <li><a href="#"><img src="images/4F.png" alt=""></a></li>
            <li><a href="#"><img src="images/4F.png" alt=""></a></li>
            <li><a href="#"><img src="images/4F.png" alt=""></a></li>
            <li><a href="#"><img src="images/4F.png" alt=""></a></li>
            <li><a href="#"><img src="images/4F.png" alt=""></a></li>
            <li><a href="#"><img src="images/4F.png" alt=""></a></li>
            <li><a href="#"><img src="images/4F.png" alt=""></a></li>
            <li><a href="#"><img src="images/4F.png" alt=""></a></li>
            <li><a href="#"><img src="images/4F.png" alt=""></a></li>
            <li><a href="#"><img src="images/4F.png" alt=""></a></li>
            <li><a href="#"><img src="images/4F.png" alt=""></a></li>
            <li><a href="#"><img src="images/4F.png" alt=""></a></li>
            <li><a href="#"><img src="images/4F.png" alt=""></a></li>
            <li><a href="#"><img src="images/4F.png" alt=""></a></li>
            <li><a href="#"><img src="images/4F.png" alt=""></a></li>
            <li><a href="#"><img src="images/4F.png" alt=""></a></li>
            <li><a href="#"><img src="images/4F.png" alt=""></a></li>
            <li><a href="#"><img src="images/4F.png" alt=""></a></li>
            <li><a href="#"><img src="images/4F.png" alt=""></a></li>
            <li><a href="#"><img src="images/4F.png" alt=""></a></li>
            <li><a href="#"><img src="images/4F.png" alt=""></a></li>
        </ul>
    </div>
    <div id="item5" class="item">
        <h2>5F 电器</h2>
        <ul>
            <li><a href="#"><img src="images/5F.png" alt=""></a></li>
            <li><a href="#"><img src="images/5F.png" alt=""></a></li>
            <li><a href="#"><img src="images/5F.png" alt=""></a></li>
            <li><a href="#"><img src="images/5F.png" alt=""></a></li>
            <li><a href="#"><img src="images/5F.png" alt=""></a></li>
            <li><a href="#"><img src="images/5F.png" alt=""></a></li>
            <li><a href="#"><img src="images/5F.png" alt=""></a></li>
            <li><a href="#"><img src="images/5F.png" alt=""></a></li>
            <li><a href="#"><img src="images/5F.png" alt=""></a></li>
            <li><a href="#"><img src="images/5F.png" alt=""></a></li>
            <li><a href="#"><img src="images/5F.png" alt=""></a></li>
            <li><a href="#"><img src="images/5F.png" alt=""></a></li>
            <li><a href="#"><img src="images/5F.png" alt=""></a></li>
            <li><a href="#"><img src="images/5F.png" alt=""></a></li>
            <li><a href="#"><img src="images/5F.png" alt=""></a></li>
            <li><a href="#"><img src="images/5F.png" alt=""></a></li>
            <li><a href="#"><img src="images/5F.png" alt=""></a></li>
            <li><a href="#"><img src="images/5F.png" alt=""></a></li>
            <li><a href="#"><img src="images/5F.png" alt=""></a></li>
            <li><a href="#"><img src="images/5F.png" alt=""></a></li>
            <li><a href="#"><img src="images/5F.png" alt=""></a></li>
            <li><a href="#"><img src="images/5F.png" alt=""></a></li>
            <li><a href="#"><img src="images/5F.png" alt=""></a></li>
        </ul>
    </div>
</div>
<script src="jquery-1.11.3.min.js"></script>
<script>
    function scro(){
    $(".item").each(function(index,elem){
        if($(window).scrollTop()>=$(elem).offset().top){
            $("#list a").removeClass("active");
            $("#list a").eq(index).addClass("active");
        }
    })
   
}
//滚动事件  将驱动函数拿出去了 调用
$(window).scroll(scro);


//点击事件
    $("#list li").click(function () {
        $(window).off("scroll");
        $("html").animate({ "scrollTop": $(".item").eq($(this).index()).offset().top }, function () {
            $(window).scroll(scro);
        })
        $("#list a").removeClass("active");
        $(this).addClass("active");
    })    
   
// })
// $("#list a").click(function(){   //index（）指的是当前元素的父级下的所有子元素的下标
//     $(window).off("scroll");
//     $("html,body").animate({"scrollTop": $($(this).attr("href")).offset().top},function(){
//         $(window).scroll(scro);
//     })
//     $("#list a").removeClass("active");
//     $(this).addClass("active");
   
// })


</script>
</body>
</html>

在这里插入图片描述

Vue 3 实现左侧列表点击跳转滚动到右侧对应区域的功能
jieyucx的博客
07-23 2116
在这篇博客中，我们将展示如何使用 Vue 3 实现一个简单的页面布局，其中左侧是一个列表，点击列表项时，右侧会平滑滚动到对应的内容区域。这种布局在很多应用场景中都非常常见，比如目录导航、问答系统等。 实现跳转功能 在点击左侧列表项时，我们需要跳转到右侧对应的内容区域。为此，我们需要： 结论 通过以上步骤，我们成功实现了一个简单的 Vue 3 页面布局，左侧是一个列表，点击列表项时，右侧会平滑滚动到对应的内容区域。这种布局和滚动效果在实际开发中非常常见，希望这篇博客对你有所帮助。
Vue监听滚动实现锚点定位（双向）
热门推荐
shentibeitaokong的博客
05-21 5万+
这里很感谢 http://www.jb51.net/article/110325.htm 这篇文章带来的启发 但是我和他不同，网上的方法都是 这样计算滚动条距离窗口顶部的距离，注意是窗口，用的是document对象 // Chrome document.body.scrollTop // Firefox document.documentElement.scrollTop ...
导航移动到指定位置
deshi8958的博客
03-20 442
1,导航栏的html代码 <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav-new" id="navbar-nav"> <li onclick="moveToLocation('baseI...
#vue# vue锚点定位，滚动到具体位置
ZHENGCHUNJUN的博客
12-17 1345
需求： 点击导航栏的各个tab，跳转（滚动）到当前页面的具体位置 步骤： （1）首先在导航栏的版块里面加入方法goToAnchor，以及在（'#跳转的id类名'） <div class="nav-item-center"> <div @click="goToAnchor('#About')" >About</div> <div @click="goToAnchor('#Tokenomics')">Tokenomics<.
Vue实现左侧菜单锚点、右侧滑动
最新发布
weixin_47793340的博客
04-28 1232
组件的数据包含activeName（当前激活的标签名）和tabs（一个包含多个标签页信息的对象数组）。 mounted钩子函数中调用了bindScrollEvent方法，用于在组件挂载后绑定滚动事件。 bindScrollEvent方法计算每个标签页内容区域的偏移量，并在滚动时更新activeName以反映当前滚动到的标签页。 scrollToTabContent方法用于平滑滚动到指定的标签页内容区域。 handleTabClick方法在点击标签时被调用，它更新activeName并滚动到相应的内容区域。
vue 两步实现点击导航栏，滚动页面到指定位置的功能
前端小白的学习分享小世界
03-24 8860
实现在页面不同位置点击左侧导航栏，滚动页面到对应板块（指定位置）的功能，并可以自定义滚动操作的速度和距离。
jq导航栏点击滚动到对应位置 导航栏随页面滑动变化对应导航颜色-附件资源
03-05
jq导航栏点击滚动到对应位置 导航栏随页面滑动变化对应导航颜色-附件资源
elementUI滚动条,点击dom元素滚动到指定位置.pdf
12-16
ElementUI 滚动条点击 DOM 元素滚动到指定位置的实现细节需要考虑多个方面，包括滚动条的状态、事件处理函数和动画效果。通过使用 ElementUI 的滚动条组件和 Vue.js 的 Composition API，我们可以快速实现滚动条的...
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
10-15
这个方法对于创建导航菜单或长页面滚动到特定内容非常有用。通过调整`scrollTo`的参数，还可以实现更复杂的滚动效果，如横向滚动或自定义滚动速度。希望这个解释有助于理解和实现类似的功能。如果你在实际操作中遇到...
Vue 实现导航栏滑到顶部固定，滑动到相应位置导航栏有相应选中效果，点击导航跳转到对应位置
yhl_nsd的博客
03-23 9848
主要思路 导航栏固定 判断页面卷曲是否大于导航栏的offsetTop的值，超过了就证明导航栏到达了顶部，给导航栏添加固定样式的类名，注意：需要拿到导航栏固定前的offsetTop值，固定后的offsetTop值为0，会导致页面需要卷曲值为0时，导航栏才复位，中间会有一段突兀的情况。 滑动到相应位置导航栏有对应选中样式 html结构 <div class="about"> <div class="banner"><div class="wrap">&lt
vue 点击滑动到页面指定位置（点击下滑滚动）的功能
蓝胖子的博客
11-07 4453
vue 点击滑动到页面指定位置（点击下滑滚动）的功能
Vue利用CSS实现点击菜单导航栏实现平滑滚动定位
weixin_43811753的博客
06-10 1249
演示图片 点击角色管理栏，内容跳转滑动到内容管理 点击消息中心滑动到消息中心内容 在Vue中新建一个XX.vue文件 <template> <div> <div class="line"></div> <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="hand
Vue 点击导航栏滑动到指定位置
qq2276031的博客
04-14 4665
效果图： assignBlock.gif 方法1： <template> <div class="hold"> <!-- 跳转到指定模块 --> <div class="btn-box"> <button v-for="(i,index) in 5" @click...
vue中根据页面滑动的位置显示元素
hey
09-13 2905
&lt;template&gt; &lt;div id="goto-top" :class="{show:searchBarFixed}" @click="gotop"&gt;&lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { data(){
vue 导航锚点——点击平滑滚动，导航栏对应变化
是我别出声的博客
09-06 1万+
情况描述： h5页面的活动首页，首屏图片展示，图片下有导航栏，以及模块展示。 滑动屏幕，导航栏吸顶，点击导航栏，滚动到对应模块 //点击导航栏获取点击index goDetails(index) { this.activeMenu = index // 点击index加样式 let height = Number(document.getElementById('na...
js实现页面滚动切换导航栏/点击导航栏跳转到指定位置
qq_41241767的博客
06-03 3690
js实现页面滚动切换导航栏/点击导航栏跳转到指定位置 js部分 //标题对象 var title = document.getElementById("title"); //菜单对象 var menu = document.getElementById("menu"); //正文对象 var content =...
导航锚点跟随页面滚动，点击导航锚点快速到达页面位置
hoyche的博客
02-28 5089
// 是否存在点击导航锚点 var click_quick = null; var last_scroll_num = 0; $(window).scroll(function(){ var w_top = $(window).scrollTop(); // 循环页面正文中定位锚点 找到定位位置 $(".nav_quick[id^=quick]").each(functi...
vue 鼠标滚动内容区与侧边导航栏响应效果
Keyrt的博客
05-29 2206
<!-- 主内容区 --> <div class="container" @mousewheel="scrool"> <!-- 侧边栏区 --> <div class="side-bar"> <ul> <li v-for="(item,index) in menulist" ...
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
明月如霜丶
03-14 1002
使用vue做一个专题页面。滚动页面指定区域导航高亮。 监听滚动页面事件，对比当前页面的位置与元素的位置，如果当前滚动的区域位置大于元素的位置，导航添加class，其他去掉class进行样式切换。 我使用的方法是在定位元素上添加id，在导航添加data-id属性，监听滚动事件，如果当前滚动区域大于定位元素区域，将元素的id赋值给变量，然后与导航的data-id进行匹配，切换class。 html结构...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值