html跳转到指定位置的方法：1、底下定好容器的id，在a标签的href中用#+id，就可以实现跳转了；2、使用window.scrollTo方法，语法“window.scrollTo({ top,left ,behavior})”。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
由于页面显示的信息总是有限的，因此我们需要得以跳转到页面指定位置的实现
纯html实现
跳转时机：点击跳转到name为anchorName的位置
埋锚点：a标签的锚点，
以id为标记的锚点
立即学习“前端免费学习笔记（深入）”；
分析：当点击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视频教程
以上就是html怎么跳转到指定位置的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1550078.html
微信扫一扫 
支付宝扫一扫 
