EmberJS 5.4路由加载时如何实现页面即时滚动到顶部？

你遇到的问题本质是：didTransition触发时，Ember内部的滚动位置恢复逻辑还没执行完毕，直接调用window.scrollTo会被后续的滚动恢复操作覆盖。而setTimeout的延迟只是侥幸让你的代码在Ember的操作之后执行，确实不够可靠。

用Ember官方推荐的runloop调度就能解决这个问题，把滚动操作放到afterRender队列，确保它在所有DOM渲染和Ember内部滚动处理完成后执行：

import Route from '@ember/routing/route';
import { action } from '@ember/object';
import { schedule } from '@ember/runloop';

export default class ApplicationRoute extends Route {
  @action
  didTransition() {
    schedule('afterRender', this, () => {
      window.scrollTo({ top: 0, left: 0, behavior: 'instant' });
    });
  }
}

为什么这个方案更可靠？ #

• afterRender是Ember runloop的一个队列，专门用于DOM渲染完成后执行的操作，会自动等待Ember内部的所有路由过渡相关DOM更新、滚动恢复逻辑执行完毕。
• 不需要依赖setTimeout的不确定延迟，完全贴合Ember的生命周期，避免了不同环境下的时序问题。

如果你想进一步优化，也可以通过RouterService监听过渡事件，但在ApplicationRoute中使用didTransition action已经是最直接的方式，适合你的场景。

内容的提问来源于stack exchange，提问作者SittingElk