点击导航平滑滚动到指定锚点

 

//点击导航铆钉到指定位置
            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
                    }
                }
            },

 

转载于:https://www.cnblogs.com/ruoyaozhan/p/11602437.html