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

Question

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

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

Answer 1

可以试试在路由上做处理

1. 基础用法：滚动到页面顶部

每次导航时，页面都滚动到顶部：

const router = new VueRouter({
  routes: [
    // 你的路由配置
  ],
  scrollBehavior() {
    return { x: 0, y: 0 };
  }
});

2. 恢复滚动位置

如果存在保存的滚动位置（如浏览器的前进/后退），则滚动到该位置：

const router = new VueRouter({
  routes: [
    // 你的路由配置
  ],
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { x: 0, y: 0 };
    }
  }
});

3. 滚动到特定元素

如果 URL 中包含 hash（例如 #section1），滚动到对应的元素：

const router = new VueRouter({
  routes: [
    // 你的路由配置
  ],
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else if (to.hash) {
      return {
        selector: to.hash
      };
    } else {
      return { x: 0, y: 0 };
    }
  }
});

4. 按条件滚动

你可以根据目标路由或其他条件自定义滚动行为，例如某些特定页面滚动到特定位置：

const router = new VueRouter({
  routes: [
    // 你的路由配置
  ],
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else if (to.path === '/specific-page') {
      return { x: 0, y: 500 }; // 特定页面滚动到特定位置
    } else if (to.hash) {
      return {
        selector: to.hash
      };
    } else {
      return { x: 0, y: 0 };
    }
  }
});

5. 延迟滚动（等待页面内容加载）

有时你可能希望在页面内容加载完成后再滚动，可以使用 setTimeout 来延迟滚动：

const router = new VueRouter({
  routes: [
    // 你的路由配置
  ],
  scrollBehavior(to, from, savedPosition) {
    return new Promise((resolve) => {
      setTimeout(() => {
        if (savedPosition) {
          resolve(savedPosition);
        } else {
          resolve({ x: 0, y: 0 });
        }
      }, 500); // 延迟500ms
    });
  }
});

6. 动画滚动

如果你想让页面滚动有平滑的动画效果，可以使用 window.scrollTo 的配置项 behavior：

const router = new VueRouter({
  routes: [
    // 你的路由配置
  ],
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return { ...savedPosition, behavior: 'smooth' };
    } else {
      return { x: 0, y: 0, behavior: 'smooth' };
    }
  }
});