Vue3一键回到顶部/底部

效果图：

 示例代码：

  
    这是第一个盒子
    这是第二个盒子
    这是第三个盒子
    这是第四个盒子

    返回顶部
  





.main {
  .box {
    width: 100vw;
    margin: 10px auto;
    background-color: rgb(173, 173, 173);
    font-size: 50px;
    text-align: center;
    line-height: 400px;
  }
  .totop {
    display: none;
    position: fixed;
    bottom: 100px;
    right: 50px;
    background-color: skyblue;
    padding: 10px;
    &:hover {
      cursor: pointer;
      color: #fff;
    }
  }
}

回到底部：

  window.scrollTo({
    top: document.documentElement.offsetHeight, //回到底部
    left: 0,
    behavior: "smooth", //smooth 平滑；auto:瞬间
  });

封装BackTop.vue组件

 components/BackTop.vue: 

    
        
            
        
    

   

   

.totop {
    display: none;
    position: fixed;
    bottom: 120px;
    right: 80px;
    background-color: #b0b0b0;
    padding: 10px;
    border-radius: 50%;

    &:hover {
        cursor: pointer;
        background-color: #00000088;
    }
}

然后直接在页面中使用即可