html跳转到指定位置的方法:1、底下定好容器的id,在a标签的href中用#+id,就可以实现跳转了;2、使用window.scrollTo方法,语法“window.scrollTo({ top,left ,behavior})”。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
由于页面显示的信息总是有限的,因此我们需要得以跳转到页面指定位置的实现
纯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' }) })
两行方法比较起来,明显第二种更好点.
推荐学习:html视频教程
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。