H5页面通过锚点实现微信好友栏点击首字母来到对应位置

最新推荐文章于 2022-08-11 17:06:15 发布
最新推荐文章于 2022-08-11 17:06:15 发布
阅读量400 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45966674/article/details/121669813
版权

前端 html

锚链接真的可以说是初学阶段很牛的一种语法功能了
而且使用简单
当页面出现滚动条 且找某一个区域很麻烦时 锚点就很实用了

<a href = "#Bottr">点击我跳转向指定位置</a>

对应

<a name = "Bottr">指定位置</a>

第一个标签href内井号后的内容必须和第二个的name值相对应才能实现跳转
这样当我们点击点击我跳转向指定位置时
在这里插入图片描述
页面会快速来到指定位置的位置 前提必须距离够远 滚动条出现 高度展示不完才生效
在这里插入图片描述

瑞晟技术服务中心-耿瑞
关注
uniapp [全端兼容] - 详细实现全国城市列表A-Z市区名称索引功能，根据城市首字母分类排序城市列表选择页面，全屏省市区右侧悬浮字母索引可拖曳滑动及点击定位锚点城市名称（提供最新全国城市数据）
王佳斌
07-17 2757
uniapp，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，城市列表，a-z字母的索引排序，市区名称，城市位置，选择位置时的城市列表，城市列表选择，uniApp城市列表选择，整页，通过A-Z排序的城市列表，城市自动按首字母分类，实现城市列表选择页面功能，插件组件，中国全部市区城市索引列表，右侧悬浮a至z排序点击跳转到对应城市首字母列表单独页面，如何实现整页都是市区名称列表的城市选择功能，uview uni-indexed-list，全国市区列表选择，搜索，根据区
HTML5和CSS3 WEB技术开发
最新发布
张晨光老师的播客
01-02 6401
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
仿微信联系人的列表，按照首字母排序，支持锚点
01-09
传入特定格式的数据，包括应用的名称，指向的链接，应用的图标，按照应用的名称首字母从A~Z排序并生成列表，右侧有a~z的锚点
小程序实现h5锚点效果
weixin_42317515的博客
03-15 348
小程序实现锚点效果最简单的方法就是通过scroll-view的scroll-into-view属性来实现。 <view class="scrollWrap"> <scroll-view scroll-y:scroll-with-animation="true":style="{ height: scrollHeight+'px' }":scroll-into-vi...
h5 长页面顶部导航栏 锚点定位
emoji111111的博客
08-11 1711
h5 长页面顶部导航栏 锚点定位
锚点与页面滚动事件解决方案（H5、小程序）
老古懂的博客
08-04 1379
锚点、页面滚动事件
html5中的锚点特效
weixin_33850015的博客
08-03 358
2019独角兽企业重金招聘Python工程师标准>>> ...
微信小程序长列表 性能优化+侧边栏快速搜索
weixin_38648693的博客
09-18 1989
微信小程序长列表 新能优化+侧边栏快速搜索 近几日在做小程序性能优化，受益良多，总结一下。 一、长列表性能优化 无论是小程序还是h5 长列表性能优化都在于两个2方面 加载性能优化 ：提升每页加载速度； 减少同时渲染出的DOM元素、DOM层级、页面渲染次数 ：提升渲染效率，减少卡顿； 1.加载性能优化 小程序中加载优化主要在于 wx.setData()的使用。 setData()优化在于不要每次都直接set整个List，而是在需要对list进行操作的时候，单独添加、修改对应的元素。 优化前： getL
HTML
weixin_45842339的博客
03-23 923
文章目录学习目标第一部分第二部分第三部分网页什么是网页什么是HTMLWeb标准为什么需要Web标准Web标准的构成HTML 语法规范语法规范标签的关系HTML 基本结构标签**文档类型声明标签****语言种类****字符集**HTML 常用标签标签语义标题标签段落和换行标签文本格式化标签div 和 span 标签图像标签和路径图像标签路径超链接标签HTML 中的注释和特殊字符注释特殊字符表格标签表格属性表格结构标签合并单元格列表标签无序列表有序列表自定义列表列表总结表单标签表单域表单控件input 输入表单
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
热门推荐
qq_36609655的博客
07-02 1万+
第1章Html   Html：超级文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言。 就是给文本加上含有语义的标签。 接下来应该学习更多具体语义标签： 一、结构（固定的结构）   &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;bod...
H5首字母检索城市
09-30
该案例主要实现了首字母检索城市，原理跟小程序首字母检索城市一样。
html5设置锚点,Markdown也不服输
li520_fei的博客
01-12 840
html5设置锚点,Markdown偷学神功
h5锚点使用
风烟
11-25 4064
跳转地址 使用name跳转 代码 <a name="voicePrivacy"><b>e）xxx。</b><br></a> 然后访问的时候在链接后面加上#号和那么 就可以自动跳到访问的位置。也就是定位到文章中的某一段内容。 xxx.html#voicePrivacy 使用id也可以 <a id="voicePrivacy...
html页面添加锚点
Love666Code的博客
11-16 8612
锚点即指html中的链接，在页面中适当的添加锚点可以大大提高阅读或查找效率，尤其是一些内容分类繁多的页面。 添加锚点的方式有以下： （1）根据锚点文本标签的id属性设置，通过a标签定位： &amp;amp;amp;amp;amp;lt;div&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;a href=&amp;amp;amp;amp;quot;#maoDianId&amp;amp;amp;amp;quot;&
HTML（H5）之链接标签 - 锚点标签 - a标签 - ＜a＞标签
hnyanzijun1的博客
06-18 1144
链接分类 描述 外部链接 例如：<a\ href=“http://www.baidu.com”>百度</a> 内部链接 网站内部页面之间的相互链接，直接链接内部页面名称即可，例如<a\ href=“inex.html”>百度</a> 空链接 如果当时没有确定链接目标时，可以暂时使用空链接，例如<a\ href="#">首页</a> 下载链接 如果href里面的地址是一个文件或压缩包，当点击的时候浏览器会下载这...
html5_锚点,点击到相应的位置
Android___vv的博客
10-16 1211
html> html> head lang="en"> meta charset="UTF-8"> title>title> style> ul li{ list-style: none; float: left; margin: 10px; } style> h
vue3 H5项目列表锚点定位问题
m0_55681803的博客
04-01 1203
最近在做VUE3的 H5项目遇到的问题是详情返回列表时依旧定位到之前浏览的位置，我第一时间想到的就是keepalive,但是我们项目里详情是可以操作的，列表的状态会改变。所以不能使用缓存。我用滚动条解决了问题。 在你点击详情的时候先获取当前点击滚动条的位置 存储起来。 给滚动条赋值的时候要注意一定要在DOM渲染完成以后再赋值，不然赋值会失败，这里我用了 nextTick 还得监听滚动条事件 移动了滚动条的话就移除缓存里存储的，会有问题 记得引入 在渲染完成后调用赋值方法，下拉刷新的时候也要把本地存的
VUE实现字母列表点击以实现屏幕定位
szuwaterbrother的博客
05-18 681
事件绑定 发送给父组件 事件监听 定义事件 父组件传给子组件 接收父组件 监听器
html5 手机 tab 锚点,Android 实现 仿h5锚点效果 Scrollview + TabLayout
weixin_30984001的博客
06-16 586
ScrollView 与TabLayout 结合使用废话不多说，上效果先tab.gificon1.pngicon2.png看效果你会发现 中间的锚点导航，到最上面一直存在，这里其实是有2个TabLayout 一个位于布局顶部一个在ScrollView 内部因此布局是这样的xmlns:android="http://schemas.android.com/apk/res/android"xmlns:...
微信小程序实现页面锚点跳转：scroll-view组件解析
"微信小程序的手机通讯录点击本页面跳转位置的代码详解" 在微信小程序开发过程中，实现手机通讯录中的点击跳转至特定位置是一个常见的需求。由于小程序的环境限制，不能像Web开发那样直接操作DOM或设置HTML锚点，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值