怎么在html中跳转到指定位置?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。纯html实现跳转时机:<a href="#anchorName&q
怎么在html中跳转到指定位置?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
纯html实现
跳转时机:<a href="#anchorName">点击跳转到name为anchorName的位置</a>
埋锚点:<a name="anchorName">a标签的锚点</a>,<p id="anchorName">以id为标记的锚点</p>
分析:当点击a标签就会跳到锚点处,没有缓冲效果,体验一般,而且url里会添加"#anchorName"。这在SPA应用里是不可接收的,因为这影响了路由配置。刷新页面无效。
javascript辅助(window.scrollTo方法)
window.scrollTo({ top,left ,behavior}),分别为数字、数字、字符串。指定跳转到距离文档顶部、左边的距离,以及跳转效果(smooth、instant)
跳转时机:添加事件监听
获取元素到文档顶部的距离(offsetTop属性),offsetTop返回当前元素相对于其 offsetParent 元素的顶部的距离,因此我们要通过循环的方式累加来拿到距离文档最顶部的距离
function heightToTop(ele){ //ele为指定跳转到该位置的DOM节点 let bridge = ele; let root = document.body; let height = 0; do{ height += bridge.offsetTop; bridge = bridge.offsetParent; }while(bridge !== root) return height;}//按钮点击时someBtn.addEventListener('click',function(){ window.scrollTo({ top:heightToTop(targetEle), behavior:'smooth' })})
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注编程网精选频道,感谢您对编程网的支持。
--结束END--
本文标题: 怎么在html中跳转到指定位置
本文链接: https://www.lsjlt.com/news/278907.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0