Question

很多网站都错了，这真的很烦人。当用户使用浏览器的前进或后退按钮导航时，滚动位置应与上次在页面上的位置相同。这有时在Facebook上正常工作，但有时却没有。 Google+似乎总是失去你的滚动位置。

因此，在浏览新页面时，已经有很多关于将滚动条重置到页面顶部的问题。 Ember.js的食谱也shows how to hook into Route.activate：

export default Ember.Mixin.create({
  activate: function() {
    this._super();
    window.scrollTo(0,0);
  }
});

然而，这只能解决问题的一半。当用户使用后退/前进按钮时，滚动位置将不会恢复，只需重置。

有很多尝试解决这个问题，很多只是将滚动位置存储在Ember.Controller实例中，例如在article中。然而，这只是部分解决方案。如果多次使用控制器，则只保留一个滚动状态。

如何保留恢复旧滚动状态的默认浏览器实现？因此，如果从html5历史状态更改触发Route.activate，则不执行任何操作？

Answer 1

我发现the solution by JeremyTM here通常有效。但是，根据我的经验使用deactivate方法会导致转换时设置为lastScroll的值不一致，而使用路径的willTransition操作方法会导致一致的设置行为。

以下是对他的mixin的修改，对我来说效果更好：

import Ember from 'ember';

export default Ember.Mixin.create({
  activate: function() {
    this._super.apply(this, arguments);
    var self = this;

    if(this.get('lastScroll')){
      Ember.run.next(function(){
        Ember.$(window).scrollTop(self.get('lastScroll'));
      });
    } else {
      Ember.$(window).scrollTop(0);
    }
  },

  actions: {
    willTransition: function() {
      this._super.apply(this, arguments);
      this.set('lastScroll', Ember.$(window).scrollTop());
    }
  }
});

请注意，这仍然让我觉得这是问题的部分解决方案，因为它不会在所有链接点击上重置滚动（与浏览器导航/历史记录更改相反）。它在加载路径的第一个链接点击上执行此操作，但是对该路径的所有后续链接点击也将加载上一个滚动位置，从而无法识别用户在不参考其先前视图行为的情况下加载路径的预期操作（又名重置滚动位置。）

Answer 2

安装此ember插件ember-router-scroll以使用滚动历史记录还原功能重置滚动。它使用了浏览器的HistoryLocation API，因此它可以直接使用。

Ember.js恢复历史记录滚动，重置滚动链接

2 个答案: