vue3点击返回顶部

// 点击返回顶部
    
    

```
// 1. 要在heml 写一个 返回的按钮或者图标，然后定位到页面上

// 2. 在定义一个状态， 稍后用于判断是否让这个图标返回上面

// 3. 在滚动盒子上添加一个 事件   @scroll 事件        // 必须是要添加在滚动盒子上！！！

// 4. 在下面调用这个函数
    
// 5. 因为要写返回顶部，所以需要在这上面let
// 5. 返回顶部，首先是找到目标元素，e.target，然后给目标元素设置 滚动高度e.target.scrollTop = 0，但是事件对象是在 ‘e’ 中的，所以，要在上面记录一个


    let dom = null; // 定义全局的变量，来记录滚动盒子的dom元素
    let num = e.target
    // let num = 0;     // 滚动盒子的高度   // 点击返回顶部加个动画版

    // e 是事件对象，这里需要传这个参数
    const scroll =(e)=>{
    
         //    e.target 滚动盒子      // e.target.scrollTop 滚动条距离顶部的距离
         let num = e.target.scrollTop
         console.log(e.target.scrollTop);
         
         // 3.判断一下，滑动的距离到多少
         if (num > 400) {
            data.showBack = true;    // 大于400，就显示
         } else {
            data.showBack = false;   // 小于400，就隐藏
         }
    }
    
    // 6.回到顶部
    const goTop = () => {
     // 只需要把上面定义的滚动盒子的高度 = 0就可以了
      dom.scrollTop = 0
    };
    
    
    //  7.回到顶部 加个动画
    const goTop = () => {
    
        // 定义一个 定时器
      let time = setInterval(() => {
      
          // 如果 ，滚动的高度是小于定于0 ，就清除定时器
        if (num <= 0) {
          clearInterval(time); // 清空
        } else {        // 否则，就让滚动盒子的高度--
          num = num - 50;
          // num--
          dom.scrollTop = num; // 让滚动盒子的高度= 0
        }
      }, 10);
    };

    
    

 如：
     <template>
         // home是最大的父盒子
          <div class="home">
            <app-header></app-header>

            // count 是内容的滚动盒子 ，给他加  @scroll 事件
            <div class="count" @scroll="scroll">
                
                  <app-list :appList="showList"></app-list>
                </div>
                
                // 添加的这个点击返回顶部的这个图标，用定位固定到页面上          // v-show="showBack"  当他的状态比如处于false的时候，让他显示     // 添加一个点击事件，回到顶部
            <i class="iconfont icon-fanhuidingbu" v-show="showBack" @click="goTop" ></i>
          </div>
    </template>
    
    setup(props) {
        const data = reactive({
          showBack: false, //是否回到顶部        // 定义一个状态
        });
     }
     
     
    // 点击返回顶部  的距离
    let dom = null;  // 定义全局的变量，来记录滚动盒子的dom元素
    let num = 0;     // 滚动盒子的高度
    const scroll = (e) => {     // e 是事件对象
      num = e.target.scrollTop;        // 滚动条距离顶部的距离
      dom = e.target;     // 滚动盒子
      if (num > 400) {
        data.showBack = true;        // 大于400，就显示
      } else {
        data.showBack = false;         // 小于400，就隐藏
      }
    };

    // 回到顶部
    const goTop = () => {
      // dom.scrollTop = 0
      let time = setInterval(() => {
        if (num <= 0) {
          clearInterval(time); // 清空
        } else {
          num = num - 5;
          dom.scrollTop = num;
        }
      }, 10);
    };
```

点击返回顶部,有一个是使用vant组件的时候,再写返回顶部,会不好写,需要获取节点