New rendered view automatically scrolled down? [Solved]

I have noticed that the (routed) views in my Aurelia application are not automatically scrolled to top if the previous view was scrolled down.

I have made a demo app that illustrates the issue. The demo app starts with page 1 (showing a Lorem Ipsum). At the bottom of the page, there is a link to go to page 2. Page 2 is an almost identical copy of page 1, but it refers back to page 1.

When I scroll down in page 1 and click the link for page 2, page 2 is also immediately scrolled down… I would prefer pages 1 and 2 to be scrolled to the top after rendering.

Is this behavior deliberately designed this way? What is the easiest and/or most straightforward way to automatically scroll up all newly rendered views?

1 Like

Hi. In aurelia, if you need this behaviour of scrolling to the top after navigating to a route, the router has a way to do it.
Notice that this is just one of the many ways it musb be available to do it.
In your case, one way is to add the postcomplete step to the router pipeline, which is executed after activating a new route.
In your gist, app.js could be:

import { PLATFORM } from 'aurelia-framework';
import { Router, RouterConfiguration } from 'aurelia-router';

export class App {
  configureRouter(config: RouterConfiguration, router: Router) {
    config.addPipelineStep('postcomplete', PostCompleteStep);
    config.options.pushState = true;
    config.map([
      { route: '', name: 'root', redirect: 'page1' },
      { route: 'page1', moduleId: PLATFORM.moduleName('page1.html') },
      { route: 'page2', moduleId: PLATFORM.moduleName('page2.html') }
    ]);
  }
}

class PostCompleteStep {
  run(routingContext, next) {
      window.scrollTo(0, 0);
      return next();
  }
}

And voila!

Regards.

2 Likes

Hi @ormasoftchile,

Thanks! Of course, the router pipeline. I didn’t think of that. :blush: That works perfectly indeed. :+1:

1 Like