vue.js - Vue项目中scrollTo在加载好后回到原来的地方？

Question

我想要在页面加载好后通过scrollTo进行滚动，虽然在加载时它到了正确的地方，但是在加载完成时又会回到之前的地方，我是在mounted调用这个函数的：

to: function() {
  window.scrollTo(0, $("#to").offset().top);
}

Answer 1

在Vue项目中，如果你遇到在mounted钩子中使用scrollTo方法后页面又跳回到原来位置的问题，这通常是因为页面上的某些元素（如图片、异步数据等）在mounted钩子执行时尚未完全加载完成，导致页面高度在scrollTo执行后发生了变化。

为了解决这个问题，你可以考虑以下几种方法：

1. 使用nextTick

Vue的nextTick方法可以在DOM更新完成后立即执行你的回调函数。这可以确保在调用scrollTo之前，所有依赖的数据和DOM都已经更新完毕。

export default {
  mounted() {
    this.$nextTick(() => {
      this.to();
    });
  },
  methods: {
    to() {
      window.scrollTo(0, $("#to").offset().top);
    }
  }
}

2. 监听图片加载

如果你的页面中有大量图片，并且这些图片的大小对页面滚动位置有影响，你可以监听图片的加载状态，在所有图片加载完成后执行滚动。

export default {
  data() {
    return {
      imagesLoaded: 0,
      totalImages: 0
    };
  },
  mounted() {
    this.totalImages = document.querySelectorAll('img').length;
    document.querySelectorAll('img').forEach(img => {
      img.onload = () => {
        this.imagesLoaded++;
        if (this.imagesLoaded === this.totalImages) {
          this.to();
        }
      };
    });
  },
  methods: {
    to() {
      window.scrollTo(0, $("#to").offset().top);
    }
  }
}

3. 使用Vue Router的导航守卫

如果你的页面跳转是通过Vue Router实现的，并且你希望在路由跳转完成后滚动到特定位置，你可以使用Vue Router的导航守卫。

router.beforeEach((to, from, next) => {
  // 可以在这里设置滚动位置，但通常不推荐，因为可能不是所有路由跳转都需要滚动
  next();
});

// 或者在组件内使用
export default {
  watch: {
    '$route'(to, from) {
      this.$nextTick(() => {
        this.to();
      });
    }
  },
  methods: {
    to() {
      window.scrollTo(0, $("#to").offset().top);
    }
  }
}

4. 延迟执行

如果上述方法都不适用，你可以简单地使用setTimeout来延迟scrollTo的执行，但这通常不是最佳实践，因为它依赖于不确定的时间间隔。

mounted() {
  setTimeout(() => {
    this.to();
  }, 500); // 延迟500毫秒执行
},
methods: {
  to() {
    window.scrollTo(0, $("#to").offset().top);
  }
}

在实际应用中，推荐使用nextTick方法，因为它既简单又可靠，能够确保DOM更新完成后再执行滚动操作。