一、返回顶部代码
methods:{
backTop(){
const timer = setInterval(() => {
let scrollTop = document.documentElement.scrollTop
let ispeed = Math.floor(-scrollTop / 5);
document.documentElement.scrollTop = scrollTop + ispeed;
if (scrollTop === 0) {
clearInterval(timer);
}
}, 20)
}
二、隐藏返回标志
export default {
name:'Up',
data(){
return {
showBtn:false,
}
},
mounted() {
window.addEventListener("scroll", this.showBtnF, true);
},
methods:{
backTop(){……}, 20)},
showBtnF(){
let scrollTop = document.documentElement.scrollTop
if (scrollTop > 100) {
this.showBtn = true;
} else {
this.showBtn = false;
}
},
}
}
三、定义
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e3e5e6a9c6b9508d13681d8e89ee1640.png)
名称 | 含义 |
---|
document.body.clientWidth | 网页可见区域宽 |
document.body.clientHeight | 网页可见区域高 |
document.body.offsetWidth | 网页可见区域宽 + 边框 |
document.body.offsetHeight | 网页可见区域高 + 边框 |
document.body.scrollWidth | 网页正文全文宽 |
document.body.scrollHeight | 网页正文全文高 |
document.body.scrollTop | 网页被卷去的高(可修改) |
document.body.scrollLeft | 网页被卷去的左 (可修改) |
window.screenTop | 网页正文部分上 |
window.screenLeft | 网页正文部分左 |
window.screen.height | 屏幕分辨率的高 |
window.screen.width | 屏幕分辨率的宽 |
window.screen.availHeight | 屏幕可用工作区高度 |
window.screen.availWidth | 屏幕可用工作区宽度 |
scrollHeight | 对象的滚动高度 |
scrollLeft | 位于对象左边界和窗口中目前可见内容的最左端之间的距离(可修改) |
scrollTop | 位于对象最顶端和窗口中可见内容的最顶端之间的距离(可修改) |
scrollWidth | 对象的滚动宽度 |
offsetHeight | 对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 |
offsetLeft | 对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 |
offsetTop | 对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 |
event.clientX | 相对文档的水平座标 |
event.clientY | 相对文档的垂直座标 |
event.offsetX | 相对容器的水平坐标 |
event.offsetY | 相对容器的垂直坐标 |