# \# 17 Better know a framework: scroll position binding

**URL:** <https://discourse.aurelia.io/t/17-better-know-a-framework-scroll-position-binding/1585>\
**Category:** Framework Knowledge\
**Created:** [August 30, 2018, 8:51pm UTC](https://discourse.aurelia.io/t/17-better-know-a-framework-scroll-position-binding/1585 "2018-08-30T20:51:31Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [August 30, 2018, 8:51pm UTC](https://discourse.aurelia.io/t/17-better-know-a-framework-scroll-position-binding/1585/1 "2018-08-30T20:51:31Z")

</div>

Aurelia has a not well known feature: **_two way_** scroll position binding. You can use it simply via `scrolltop.bind` or `scrollleft.bind`:

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

```

Online playground:

> **[Bring your Gists to life with GistRun](https://gist.run/?id=b4c9478b87b493bfa16a75b37d6b982b)**
>
> GistRun is a site for running, creating and updating GitHub Gists. With GistRun you can easily share Gists on StackOverflow.

---

<div class="post-metadata">

**Author:** ![ormasoftchile](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ormasoftchile/32/340_2.png) [@ormasoftchile](https://discourse.aurelia.io/u/ormasoftchile)\
**Post date:** [August 30, 2018, 9:09pm UTC](https://discourse.aurelia.io/t/17-better-know-a-framework-scroll-position-binding/1585/2 "2018-08-30T21:09:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [August 30, 2018, 9:27pm UTC](https://discourse.aurelia.io/t/17-better-know-a-framework-scroll-position-binding/1585/3 "2018-08-30T21:27:54Z")

</div>

> [@ormasoftchile](#):
>
> Man,. this is awesome. How did you find out? Thanks.

By creating PR 😄 Join me!

---

<div class="post-metadata">

**Author:** ![manks](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/manks/32/1995_2.png) [@manks](https://discourse.aurelia.io/u/manks)\
**Post date:** [February 10, 2021, 1:40am UTC](https://discourse.aurelia.io/t/17-better-know-a-framework-scroll-position-binding/1585/4 "2021-02-10T01:40:12Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![ormasoftchile](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ormasoftchile/32/340_2.png) [@ormasoftchile](https://discourse.aurelia.io/u/ormasoftchile)\
**Post date:** [February 10, 2021, 2:30am UTC](https://discourse.aurelia.io/t/17-better-know-a-framework-scroll-position-binding/1585/5 "2021-02-10T02:30:27Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [February 10, 2021, 5:34am UTC](https://discourse.aurelia.io/t/17-better-know-a-framework-scroll-position-binding/1585/6 "2021-02-10T05:34:34Z")

</div>

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