vue实现滚动条返回顶部功能
methods:{//返回顶部backTop () {let timer = setInterval(function () {var top = document.body.scrollTop || document.documentElement.scrollTop;var speed = top /...
·
methods:{
//返回顶部
backTop () {
let timer = setInterval(function () {
var top = document.body.scrollTop || document.documentElement.scrollTop;
var speed = top / 4;
if (document.body.scrollTop!=0) {
document.body.scrollTop -= speed;
}else {
document.documentElement.scrollTop -= speed;
}
if (top == 0) {
clearInterval(timer);
}
},30);
},
// 为了计算距离顶部的高度,当高度大于60显示回顶部图标,小于60则隐藏
scrollToTop () {
const that = this
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
that.scrollTop = scrollTop;
//判断滚动超出一定距离后在让返回顶部按钮出现
// if (that.scrollTop > 300) {
// that.backFlag = true
// }else {
// that.backFlag = false
// }
}
},
mounted () {
let that = this;
window.addEventListener('scroll', that.scrollToTop);
},
destroyed (){
let that = this;
window.removeEventListener('scroll', that.scrollToTop);
},
更多推荐
已为社区贡献3条内容
所有评论(0)