h5 长页面顶部导航栏 锚点定位

最新推荐文章于 2024-07-30 13:02:28 发布
最新推荐文章于 2024-07-30 13:02:28 发布
阅读量1.7k 收藏 2
点赞数 4
文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/emoji111111/article/details/126288920
版权

接收的需求是长页面顶部有导航栏，点击时直接到达对应版块

页面中固定有六个部分，所有顶部导航栏可以直接写死，添加点击事件即可

页面滚动到哪一部分，导航栏对应文字，颜色加深

首先实现点击到达对应部分内容

给每个部分div添加一个id

 接下来实现屏幕滚动，监听滚动到哪部分，先获取每个部分在页面的位置（减45是为了减去顶部导航栏的高度） 

 

监听滚动事件

 

 

 

emoji111111
关注
uniapp - 适用于H5网页 | 小程序 | APP 的完美锚点功能插件，直接复制源码即可使用！类似选项卡点击自动跳转到指定DOM位置的效果！
高级前端工程师
03-29 6812
uniapp锚点跳转及滚动tab选项卡切换，uniapp利用scroll-view实现类似a标签锚点功能，uniapp锚点定位，uniapp点击选项卡滚动到指定的位置怎么做，uniApp实现滚动视图点击锚点跳转，uniapp如何实现点击菜单然后锚点跳转到固定可视区域，Uniapp实现锚点跳转和滚动监听，uni-app scroll-view + tab锚点定位，使用uniapp如何实现锚点定位和滚动监听功能，uniapp实现商品详情锚点定位效果，uni-app锚点跳转及滚动Tab切换(非scroll-vie
uniapp - 全端兼容 “选项卡瞄点定位“ 功能，点击后滚动到锚点位置并且选项卡自动吸顶，当 “经过“ 锚点时自动定位选项卡（详细运行示例源码，超详细注释稳定可靠！）支持H5、App、小程序全平台
王佳斌
03-29 4743
uniapp瞄点选项卡，uniapp锚点，uniapp H5 微信小程序 APP平台锚点定位，uniapp锚点链接，uniapp实现商品详情锚点定位效果，uniapp项目如何实现锚点定位功能，uniapp 微信小程序 h5网页如何使用锚点定位效果，uniapp如何实现锚点跳转，使用uniapp如何实现锚点定位和滚动监听功能，uni-app H5 小程序中使用锚点定位，uni-app添加锚点和监听滚动切换tab，uniapp实现点击吸顶锚点定位，uniapp滚动吸顶+锚点+滚动自动tab切换，uniapp锚点
H5 导航菜单栏
08-12
NULL 博文链接：https://onestopweb.iteye.com/blog/2264780
vue3 H5项目列表锚点定位问题
m0_55681803的博客
04-01 1203
最近在做VUE3的 H5项目遇到的问题是详情返回列表时依旧定位到之前浏览的位置，我第一时间想到的就是keepalive,但是我们项目里详情是可以操作的，列表的状态会改变。所以不能使用缓存。我用滚动条解决了问题。 在你点击详情的时候先获取当前点击滚动条的位置 存储起来。 给滚动条赋值的时候要注意一定要在DOM渲染完成以后再赋值，不然赋值会失败，这里我用了 nextTick 还得监听滚动条事件 移动了滚动条的话就移除缓存里存储的，会有问题 记得引入 在渲染完成后调用赋值方法，下拉刷新的时候也要把本地存的
微信小程序 - 自定义头部导航栏开发
最新发布
觉醒法师的专栏
07-30 3036
默认情况下，‌小程序的顶部导航栏由系统自动生成，‌允许修改一些基本样式如背景色、‌文字颜色等。‌然而，‌如果需要实现更复杂的样式，‌如自定义图标、‌背景等，‌或者需要适配不同手机屏幕的高度和样式，‌就需要自定义顶部导航栏。‌ 小程序自定义头部导航栏的开发主要涉及系统顶部状态栏和导航栏标题区域，‌自定义顶部导航栏的好处包括提高用户体验、‌增加页面交互性等。‌创建一个自定义导航栏组件，‌包含导航栏的样式和交互逻辑，‌并在需要使用导航栏的页面中引入自定义导航栏组件。‌
h5锚点使用
风烟
11-25 4064
跳转地址 使用name跳转 代码 <a name="voicePrivacy"><b>e）xxx。</b><br></a> 然后访问的时候在链接后面加上#号和那么 就可以自动跳到访问的位置。也就是定位到文章中的某一段内容。 xxx.html#voicePrivacy 使用id也可以 <a id="voicePrivacy...
html5锚点自动定位,锚点定位总结html5属性大全
weixin_31222401的博客
06-04 396
HTML5基础PPThttp://file.mukewang.com/class/assist/709/6616789/7cl0ccss933/HTML基础.pdf锚点总结个人比较出错的错误：name属性：用在a标签上的，其他的属性就不行，下面用name来表示属性，我想链接到哪里，那个a标签就写XXXXX点击链接跳转的链接：(#+‘name的值’)xxxxxxxxa标签中的id属性；在任何标签上都...
移动端h5 顶部菜单栏_移动端H5开发之顶部固定导航布局
weixin_34079307的博客
02-12 3761
在开发移动端h5应用时，尤其是在开发混合app时，一般情况下，顶部导航会一直固定在页面头部，如下图： h5的常规操作是直接来个fixed定位，代码如下：position:fixed;top:0;left:0;right:0;但是，这种写法，在ios系统下，会出现一些，类似下拉页面时，导航会一起滚动，无法固定在屏幕顶部，或者是有input标签的时候，调出软键盘之后，页面无法往上顶，导致标签被挡住，尤...
html鼠标下滑顶部导航隐藏,锚点定位被顶部固定导航栏遮住的解决方案
weixin_34364310的博客
06-05 1097
很多网站都有一个固定在上方的导航栏，方便用户搜索和跳转到其他页面。同时为了方便用户浏览长文档，都会加上目录，点击段落标题跳转到段落所在的位置，如图所示：如果使用锚点实现目录的跳转会遇到 fixed 导航栏遮住了标题的问题。1. 锚点定位机制如果没有滚动条，锚点失效。如果有滚动条，滚动条滚动到地址 hash (地址 # 号后面的内容)对应的锚点元素padding-box上边缘位置。2. 解决方案示例...
vue实现吸顶、锚点和滚动高亮按钮效果
10-16
例如，通过 `HTMLElement.offsetTop` 属性获取元素相对于其最近的定位祖先元素的顶部距离。在 Vue 中，可以在 `mounted` 生命周期钩子中添加滚动事件监听，并在 `destroyed` 钩子中移除。在滚动事件处理函数中，比较...
【JavaScript源代码】JavaScript 获取滚动条位置并将页面滑动到锚点.docx
12-29
或者是在一个长页面中，通过“返回顶部”按钮迅速回到页面顶端。这些功能不仅提升了用户体验，同时也使得页面更加友好和易于操作。 本文将详细介绍如何使用JavaScript来实现页面内锚点跳转功能，并讨论相关的实现...
HTML5移动端导航栏
10-15
HTML5移动端导航栏
H5使用vant并根据首字母处理数据锚点定位
qq_43235503的博客
06-12 550
H5使用vant并根据首字母处理数据锚点定位
H5页面通过锚点实现微信好友栏点击首字母来到对应位置
weixin_45966674的博客
12-02 400
锚链接真的可以说是初学阶段很牛的一种语法功能了 而且使用简单 当页面出现滚动条 且找某一个区域很麻烦时 锚点就很实用了 <a href = "#Bottr">点击我跳转向指定位置</a> 对应 <a name = "Bottr">指定位置</a> 第一个标签href内井号后的内容必须和第二个的name值相对应才能实现跳转 这样当我们点击点击我跳转向指定位置时 页面会快速来到指定位置的位置 前提必须距离够远 滚动条出现 高度展示不完才生效 .
构建动态交互式H5导航栏：滑动高亮、吸顶和锚点导航技巧详解
hello ice cream
04-14 1338
使用粘性定位 sticky 实现吸顶，IntersectionObserver 观察元素相交状态实现滑动高亮，计算高度并通过 scroll 实现吸顶。
移动端H5开发之顶部固定导航布局
素钗一生推
01-30 1万+
在开发移动端h5应用时，尤其是在开发混合app时，一般情况下，顶部导航会一直固定在页面头部，如下图： h5的常规操作是直接来个fixed定位，代码如下： position:fixed; top:0; left:0; right:0; 但是，这种写法，在ios系统下，会出现一些，类似下拉页面时，导航会一起滚动，无法固定在屏幕顶部，或者是有input标签的时候，调出软键盘之后，页面无法往上...
HTML5 总结（六）——锚点定位
qq_42188457的博客
03-04 674
锚点定位 通过创建锚点链接，用户能够快速定位到目标内容。步骤如下： 步骤 1.使用 <a href="#id名">链接文本</a> 创建链接文本。 2.使用相应的id名标注跳转目标的位置。 ...
HTML5网页设计小案例：网页导航栏的设计
热门推荐
weixin_63279307的博客
08-02 1万+
HTML5网页设计小案例：网页导航栏的设计
锚点与页面滚动事件解决方案（H5、小程序）
老古懂的博客
08-04 1379
锚点、页面滚动事件
h5通过顶部导航栏锚点到对应的内容区
06-09
要通过顶部导航栏锚点到对应的内容区，可以使用HTML的锚点链接和CSS的滚动效果来实现。具体步骤如下： 1.在顶部导航栏中添加锚点链接，例如：<a href="#section1">Section 1</a> 2.在对应的内容区域中添加id属性，例如：<div id="section1">Section 1 Content</div> 3.在CSS中使用scroll-behavior属性来控制滚动效果，例如：html {scroll-behavior: smooth;} 这样，在点击顶部导航栏中的链接时，页面会平滑滚动到对应的内容区域。注意，滚动效果在一些老旧的浏览器中可能不支持。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值