vue scrollTop 平缓滚动回到顶部_滚动条scrolltop平缓-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42669897/article/details/112317870

本文介绍如何在Vue.js应用中实现平滑滚动回到顶部的功能，特别是在页面内容较长时提升用户体验。组件支持自定义滚动元素，通过传递domName参数（类名或ID），默认为body。

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

当页面很长很长的时候，返回到顶部增强用户体验是必不可少的功能。

一般监听都只是监听body。

这个组件我还加入了指定元素只要传：domName参数：类名：".texts" 或者 ID："#texts"。如果不传默认是：body。

详情请看代码

TOTop组件：


<template>
  <div class="back-to-top" ref="btn" @click="totop"></div>
</template>
<script>
export default {
  name: 'name',
  props: ['domName'],
  mounted() {
    this.scroll();
  },
  methods: {
    totop () {
      let body = window.document.querySelector(this.domName);
      let stepNum = 10;
      let scrollTop = body? body.scrollTop : document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;;
      let timeId = setInterval(()=>{
        stepNum += stepNum ;
        if(scrollTop <= 0) clearInterval(timeId);
        let sum = scrollTop -= stepNum;
        if(body){
          body.scrollTop = sum
        }else{
          document.documentElement.scrollTop = sum;
          window.pageYOffset = sum ;
          document.body.scrollTop = sum ;
        }

      },80)
    },
    scroll() {
      let body = window.document.querySelector(this.domName || 'body');
      body.onscroll = () => {
        let scrollTop = body.scrollTop || document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        let innerHeight = window.innerHeight - 500;
        let opacityNum = 1 -  (innerHeight - scrollTop) / innerHeight;
        let resNum = opacityNum > 1? 1 : opacityNum;
        this.$refs['btn'].style.opacity =scrollTop <= 0? 0 : resNum;
        this.$refs['btn'].style.display = scrollTop > innerHeight?'block' : 'none';
      }
    }
  }
}

</script>
<style lang="less" scoped>
.back-to-top {
  position: absolute;
  right: 0.2rem;
  bottom: 1rem;
  width: 1rem;
  height: 1rem;
  opacity: 0;
  display: none;
  background: url('../assets/img/ToTop.png') center no-repeat;
  background-size: cover;
  z-index: 9;
}


</style>

使用组件：

<template>
  <div class="texts">
<!--
  domName:滚动条的元素 class | id; 如果没传默认值为 body
  <ToTop domName="#texts"></ToTop>
-->
    <ToTop domName=".texts"></ToTop>
  </div>

</template>

<script>
import ToTop from "@/components/ToTop";
export default {
  components:{
    ToTop
  }
}
</script>

<style scoped>
.texts{
  width: 100%;
  overflow-y: auto;
  height: 100vh; //注意：当domName不为空时必须有实际的高度
}

</style>