奔跑の大可爱

已于 2023-04-01 09:37:40 修改

阅读量953

点赞数 2

文章标签： vue.js javascript 前端

于 2023-03-31 19:36:38 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_64210950/article/details/129885586

版权

文章介绍了如何使用JavaScript实现平滑返回页面顶部的功能，通过设置定时器控制滚动速度，以及监听滚动事件来显示或隐藏返回顶部的按钮。同时，列举了与网页滚动和尺寸相关的DOM属性，如scrollTop、clientWidth和screenHeight等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、返回顶部代码

methods:{
    backTop(){
    	// 开个定时器返回顶部时缓慢优雅一些，是 document.documentElement.scrollTop = 0 的升级版
        const timer = setInterval(() => {
            // 页面顶部卷去高度
            let scrollTop = document.documentElement.scrollTop
            // 高度控速 = 页面顶部卷去高度正值 / n ===> n 越大，返回越慢
            let ispeed = Math.floor(-scrollTop / 5);
            // 页面顶部卷去高度 + 高度控速 ===> 和不为零，定时器一直开启（不明白的同志可以尝试同时打印 scrollTop 和 ispeed）
            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	相对容器的垂直坐标