Ember.js 更改视图时滚动到顶部

当我的应用程序的主视图被切换（重新连接我的应用程序控制器的主出口的新路由）时，我希望页面被滚动到顶部。否则就有点奇怪了，我导航到另一个类似视图的页面，而视口仍然丢失在我离开的地方

我破解了一个解决方案，想知道是否有更好的方法，或者是否有人有同样的方法

我是这样做的：

App.ApplicationController = Ember.Controller.extend({
  connectOutlet: function(){
    window.scrollTo(0, 0);
    this._super.apply(this, arguments);
  }
});

---

您可能应该尝试扩展

Ember.Route

并在

enter

回调中添加

窗口。滚动至
。然后，您可以调用自己的路由。
extend（）
，而不是使用余烬的
路由
，这样当您输入路由/状态时，它们会自动向上滚动。类似于此：

这有意义吗？
我通过以下代码实现了这一点：

Ember.Route.reopen({
  render: function(controller, model) {
    this._super();
    window.scrollTo(0, 0);
  }
});

@Baruch的解决方案很好，但当我实现它时，我已经在我的应用程序状态中的元素上进行了渲染，并且在不需要的时候会产生一个scrollTop

我发现这更有效，因为它只在路径更改上运行：

App.ApplicationController = Ember.Controller.extend({

  currentPathChanged: function () {
    window.scrollTo(0, 0);
  }.observes('currentPath')

});

咖啡剧本：

Ember.Route.reopen
    activate: ->
      @_super()
      window.scrollTo(0, 0)

Javascript:

Ember.Route.reopen({
  activate: function() {
      this._super();
      window.scrollTo(0, 0);
  }
});

现在是
render（名称、选项）
，如果您专门调用render（即使用模式），则希望将其传递给super（）

余烬3.12+（这里列出的是技术上的3.20代码）

3.12之前的版本（这在技术上是3.4，但关键代码应该相同）

我们已经多次处理了这个问题，我们发现最简单、最直接的方法是在router.js文件中使用“route transition”事件函数配置一次。我们使用了
didtransformation
，后来它在Ember 3.12中被弃用，取代了
routedchange
。我在下面发布了两个示例。根据您使用的是哪个版本的Ember，某些语法可能略有不同，但此核心代码应该是相同的。
您的方法完美地回答了这个问题。是的，它似乎与离开路线有关，而与应用程序控制器无关。如果this.childStates.length为0，您还可以重新打开Ember.Route并检查每个“enter”事件，以便知道这是一个离开路线。如果您需要在特定路线中使用“回车”事件，这两种方法都将责任留给您。请记住，重新打开
Ember.Route
会使所有路线的
enter
功能过度。您可能希望保留框架中的原始功能，并在您自己的库中进行扩展。对于遇到此问题的新ember用户，
Route#enter
是一个私有挂钩，您应该使用
Route#activate
。在任何一种情况下，确保调用
this.\u super.apply（this，arguments）从您的方法中。值得一提的是，这是Ember文档正式规定的方法，至少在食谱中是这样的：这也是唯一适合我的方法，使用最新的Ember cli，我必须创建一个mixin，并在每个受影响的路线上使用它。无法使其在所有子路由的应用程序路由上启动。感谢您使此线程保持最新！没问题：）很高兴我的帖子仍然相关哈哈
Ember.Route.reopen({
  activate: function() {
      this._super();
      window.scrollTo(0, 0);
  }
});

Ember.Route.reopen({
  render: function(name, options) {
    if (name != null) {
      return this._super(name, options);
    } else {
      return this._super();
    }
  }
});

import EmberRouter from '@ember/routing/router';

const Router = EmberRouter.extend({
  init() {
    // call event everytime route changes
    this.on('routeDidChange', () => {
      this._super(...arguments);
      window.scrollTo(0, 0); // scrolls to top
    });
  }
});

Router.map(function () {
  // your mapping code goes here
});

export default Router;

import EmberRouter from '@ember/routing/router';

const Router = EmberRouter.extend({
  didTransition() {
    this._super(...arguments);
    window.scrollTo(0, 0);
   }
});

Router.map(function () {
  // your mapping code goes here
});


export default Router;