一、返回顶部代码
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;
}
},
}
}
三、定义
名称 |
含义 |
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 |
相对容器的垂直坐标 |