扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
怎么在html中跳转到指定位置？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
成都创新互联公司专业为企业提供阜城网站建设、阜城做网站、阜城网站设计、阜城网站制作等企业网站建设、网页设计与制作、阜城企业网站模板建站服务，10余年阜城做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
纯html实现
埋锚点：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'
})
})看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联的支持。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网