博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
点击导航平滑滚动到指定锚点
阅读量:5291 次
发布时间:2019-06-14

本文共 1715 字,大约阅读时间需要 5 分钟。

 

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

你可能感兴趣的文章
Sqli labs系列-less-4 这关好坑!!!
查看>>
路由跟踪工具0trace
查看>>
给大家分享一张CSS选择器优选级图谱 !
查看>>
Win7中不能调试windows service
查看>>
T-SQL触发器,限制一次只能删除一条数据
查看>>
boost库使用:vs2013下boost::container::vector编译出错解决
查看>>
通过httplib2 探索的学习的最佳方式
查看>>
理解运算符重载 4
查看>>
快来熟练使用 Mac 编程
查看>>
第二周
查看>>
断言简介
查看>>
Node.js 入门:Express + Mongoose 基础使用
查看>>
plsql使用,为什么可以能看见其他用户的表
查看>>
一步步教你轻松学奇异值分解SVD降维算法
查看>>
Scripting Java #3:Groovy与invokedynamic
查看>>
2014-04-21-阿里巴巴暑期实习-后台研发-二面经验
查看>>
数据结构中线性表的基本操作-合并两个线性表-依照元素升序排列
查看>>
使用pager进行分页
查看>>
吐医疗器械研发可配置性需求的槽点
查看>>
UVA - 1592 Database
查看>>