Vue跳转页面回到顶部设置

最新推荐文章于 2024-05-11 11:53:47 发布

O3ohn

最新推荐文章于 2024-05-11 11:53:47 发布

阅读量476

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/ka_xingl/article/details/113499061

版权

从A页面中间点击触发某事件跳转B，此时页面不会回到B页面顶部。

<template>
  <div class="policy-home">
  //其他代码省略
    <el-backtop ref="policyBackTop" target="#app"></el-backtop>
  </div>
</template>

<script>
  import top from './common/topnav.vue'
  export default {
    data() {
      return {
      }
    },
    components: {
      top
    },
    methods: {
      scrollToTop() {
        let el = document.querySelector('#app');
        let step = 0;
        let interval = setInterval(() => {
          if (el.scrollTop <= 0) {
            clearInterval(interval);
            return;
          }
          step += 10;
          el.scrollTop -= step;
        }, 20);
      }
    },
    watch: {
      // 监听路由变化
      '$route.path': function () {
        // 页面重置到顶部
        this.scrollToTop()
      }
    }
  }
</script>