怎么在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'
})
})看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
