# 17 Better know a framework: scroll position binding

Framework Knowledge
1

Aurelia has a not well known feature: two way scroll position binding. You can use it simply via scrolltop.bind or scrollleft.bind:

<div
  class="container-with-lot-of-content"
  scrolltop.bind="ctScrollPosition">
 ... lot of content
</div>

Online playground:

8 Likes
2

Man,. this is awesome. How did you find out? Thanks.

3

By creating PR :smile: Join me!

5 Likes
4

I tried this on a sub-route/component, but it didn’t work. I also don’t see it documented anywhere.

I’m having a problem where navigation between routes doesn’t reset the scrollbar and can end up in the middle of the new view if you’re previous view was scrolled at all. Not desirable.

Is there anyway to set a global route config to reset the scrollbar/view to top upon navigation?

5

In relation to the scrollbar reset upon navigation, there’s a simple way of doing it if you are using jQuery using the router pipeline which is documented in http://aurelia.io/docs/routing/configuration#pipelines.
Note that the jQuery requirement doesn’t have to do with aurelia or the router; it is just my implementation.

First, require or import jQuery.

import $ from ‘jquery’;

In your app’s configureRouter function:

async configureRouter(config: RouterConfiguration, router: Router) {
...
    config.addPipelineStep('postcomplete', PostCompleteStep);
...
}

Then implement the PostCompleteStep class:

class PostCompleteStep {
  run(routingContext, next) {
      $("body").scrollTop(0);
      return next();
  }

}

Best wishes.

6

window.scrollTo({ top: 0, behavior: 'smooth' });