码迷,mamicode.com
首页 > 其他好文 > 详细

点击导航滚动到指定锚点

时间:2019-09-28 12:51:04      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:pre   code   +=   document   tom   锚点   avl   tail   内容   

 

//点击导航铆钉到指定位置
            goDetails(index) {
                this.current = index;
                let height = Number(this.$refs[‘navleft‘].offsetHeight)// 导航的高度
                let toTop = this.$refs.single[index].offsetTop  // index对应内容的高度
                let total = index === 0 ? toTop - height - 10 : toTop - height + index - 15
          //减去导航的高度和margin-tbottom的高度为滚动高度 let distance = document.documentElement.scrollTop || document.body.scrollTop let step = total / 20 if (total > distance) { let newTotal = total - distance step = newTotal / 20 smoothDown() } else { let newTotal = distance - total step = newTotal / 20 smoothUp() } function smoothDown() { if (distance < total) { distance += step document.body.scrollTop = document.documentElement.scrollTop = distance setTimeout(smoothDown, 10) } else { document.body.scrollTop = document.documentElement.scrollTop = total } } function smoothUp() { if (distance > total) { distance -= step document.body.scrollTop = document.documentElement.scrollTop = distance setTimeout(smoothUp, 10) } else { document.body.scrollTop = document.documentElement.scrollTop = total } } },

 

点击导航滚动到指定锚点

标签:pre   code   +=   document   tom   锚点   avl   tail   内容   

原文地址:https://www.cnblogs.com/ruoyaozhan/p/11602437.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!