EmberJS-路线后如何滚动到插座？

Question

My application template :

<div class ="row">
  <div class="hide-for-large-only small-12 text-center columns">
    <h1 class="subheader"> Departments </h1>
  </div>
  <div class="small-12 large-3 large-pull-1 columns">
    <ul class="no-bullet sid-nav">
      <li>{{#link-to "Departments.Foo"}}Foo{{/link-to}}</li>
      <li>{{#link-to "Departments.Bar"}}Bar{{/link-to}}</li>
      <li>{{#link-to "Departments.FooBar"}}FooBar{{/link-to}}</li>
      <li>{{#link-to "Departments.BarFoo"}}BarFoo{{/link-to}}</li>
    </ul>
  </div>

  <div class="small-12 large-9 columns ">
    {{outlet}}
  </div>
</div>

For Desktop version, scrolling to top of window seems fine.

App.ApplicationController = Em.Controller.extend({
  currentPathChanged: (function() {
    return window.scrollTo(0, 0);
  }).observes("currentPath")
});

But in Mobile version, on clicking the link the change of content goes unnoticed at bottom as {{outlet}} goes below the side nav. So how to auto scroll to {{outlet}} after a Route ?

Answer 1

You need to ensure that the window.scrollTo call occurs after the new view (on route change) has fully rendered. Ember.js provides a queue exactly for that: afterRender .

Let's define a mixin that you can use in a view, so that whenever that view has rendered, it scrolls the window to the starting position of its template:

App.ScrollToMixin = Ember.Mixin.create({
  setupScrollToOutlet: function() {
    Ember.run.scheduleOnce('afterRender', this, function(){
      var position = this.$().offset().top;
      window.scrollTo(0, position);
    });
  }.on('didInsertElement')
});

Let's say you visit the posts route and the outlet is far down into the page. Include the App.ScrollToMixin into the App.PostsView , and it will scroll the window to the posts.handlebars starting position:

App.PostsView = Ember.View.extend(App.ScrollToMixin);

Demo: http://emberjs.jsbin.com/miqakovu/4/edit

Answer 2

This doesn't have much to do with Ember.js, this is straight Javascript (or jQuery if you prefer). First, add an ID or unique class:

<div class="small-12 large-9 columns" id="outlet_div">
    {{outlet}}
</div>

Then, to scroll to it:

window.scrollTo(0, $('#outlet_div').offset().top);