阅读 38

vue实现滚动超过首屏高度位置点击小盒子回到顶部效果(火狐、IE均有效)

思路分析

回到顶部效果,思路其实很简单。就是初始有一个盒子,固定定位在浏览器网页的右下角,一开始要隐藏起来。当滚动超过首屏高度的位置时,才让其出现。给这个小盒子绑定一个点击事件,在点击事件的回调中,使用定时器去让滚动条的高度递减,从而实现回到顶部效果。当然也要绑定滚动事件,监听滚动的高度,即监听滚动条的纵坐标的位置。因为需要拿滚动条滚动的高度和首屏的高度做比较。 话不所说,先看一下最终效果图:

GIF 2021-3-11 22-47-51.gif

请按照注释来哦

完整代码附上

<template>
  <div id="app">
    <p v-for="(item, index) in arr" :key="index">回到顶部</p>
    <div class="back" v-show="showGoTop" @click="goToTop">back</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [],
      showGoTop: false,
    };
  },
  mounted() {
    for (let index = 0; index < 54; index++) {
      this.arr.push(index);
    }

    // 第一步,绑定一个滚动事件,当滚动的距离达到浏览器窗口的内部高度的时候(大概一个屏幕的高度吧)
    //         就让回到顶部的小盒子显示出来
    window.addEventListener("scroll", this.handleScroll,true); // 这里加上true是为了保证浏览器滚动的及时性
  },
  methods: {
    // 滚动事件的回调函数
    handleScroll() {
      let scrolltop = document.documentElement.scrollTop; // 获取当前页面的滚动条纵坐标位置 
      console.log("看看滚动了多高的距离",scrolltop);
      if(scrolltop > window.innerHeight){  // 浏览器窗口的内部高度 window.innerHeight
        this.showGoTop = true // 超过就显示出来
      }else{
        this.showGoTop = false // 不超过还藏起来
      }
    },
    // 第二步,当用户点击回到顶部小盒子的时候,仍然获取所在的页面的滚动条纵坐标位置,
    //         使用定时器让页面滚动条的坐标位置递减,这样就能实现平滑过渡的效果
    goToTop() {
      let scrolltop = document.documentElement.scrollTop; // 获取当前页面的滚动条纵坐标位置 
      // 定时器平滑滚动
      const time = setInterval(() => {
        document.documentElement.scrollTop = scrolltop -= 40;
        if (scrolltop <= 0) {  // 定时器要及时清除掉,要不然一直执行很恐怖的
          clearInterval(time);
        }
      }, 10);
    },
  },
};
</script>

<style lang="less" scoped>
p {
  margin-bottom: 30px;
}
.back {
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background-color: #abf;
  position: fixed;
  right: 100px;
  bottom: 100px;
  cursor: pointer;
}
</style>
复制代码

总结

好记性不如烂笔头,记录一下

文章分类
前端
文章标签