vue项目 回到顶部功能 定位在头部

• Z时代
• 2024-01-10
• 分类：综合

‘backBox'是外层容器类名， 根据传入的index，定位在不同的位置

组件：

<template>
  <div class="toTop" @click="getActiveClass(0)">
      <img src="@/assets/images/up01.png" alt="">
  </div>
</template>
<script>
  export default {
    methods: {
      getActiveClass(index) {
        let jump = document.querySelectorAll('.backBox')
        jump[index].scrollIntoView({ block: 'start', behavior: 'smooth' })
      }
    }
  }
</script>
<style lang="less" scoped>
  .toTop {
      position: fixed;
      bottom: 60px;
      right: 20px;
      width:48px;
      height:48px;
      img {
        width: 48px;
        height: 48px;
      }
  }
</style>

以上是 vue项目 回到顶部功能 定位在头部 的全部内容， 来源链接： utcz.com/z/374862.html