# New rendered view automatically scrolled down? \[Solved\]
**URL:** https://discourse.aurelia.io/t/new-rendered-view-automatically-scrolled-down-solved/4068
**Category:** Help Requests
**Created:** [February 28, 2021, 3:42pm UTC](https://discourse.aurelia.io/t/new-rendered-view-automatically-scrolled-down-solved/4068 "2021-02-28T15:42:04Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@Bart](https://discourse.aurelia.io/u/Bart)
#### Post date: [February 28, 2021, 3:42pm UTC](https://discourse.aurelia.io/t/new-rendered-view-automatically-scrolled-down-solved/4068/1 "2021-02-28T15:42:04Z")
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](https://gist.dumber.app/?gist=959991dfc5eb11299bfe63ecfb84f72a) 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?
---
### Author:  [@ormasoftchile](https://discourse.aurelia.io/u/ormasoftchile)
#### Post date: [February 28, 2021, 8:46pm UTC](https://discourse.aurelia.io/t/new-rendered-view-automatically-scrolled-down-solved/4068/2 "2021-02-28T20:46:03Z")
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.
---
### Author:  [@Bart](https://discourse.aurelia.io/u/Bart)
#### Post date: [March 1, 2021, 1:11pm UTC](https://discourse.aurelia.io/t/new-rendered-view-automatically-scrolled-down-solved/4068/3 "2021-03-01T13:11:04Z")
Hi @ormasoftchile,
Thanks! Of course, the router pipeline. I didn’t think of that. 😊 That works perfectly indeed. 👍
---
### Author:  [@manks](https://discourse.aurelia.io/u/manks)
#### Post date: [February 20, 2022, 6:47pm UTC](https://discourse.aurelia.io/t/new-rendered-view-automatically-scrolled-down-solved/4068/4 "2022-02-20T18:47:56Z")
This is an elegant solution for Aurelia integration. The curious thing is that it’s only possible to define this at the root router config, and the pipeline class seems to only execute on the top level route, eliminating more fine grain `scrollTo` at specific child routes. I tried adding a `scrollReset` setting to the routes, and only when I added it to the top-level route did my pipeline pick it up:
Root routes:
```auto
import { PLATFORM } from 'aurelia-pal';
import { Router, RouterConfiguration, ConfiguresRouter, PipelineStep, NavigationInstruction, Next } from 'aurelia-router';
class PostNavigationScrollUp implements PipelineStep {
run(instruction: NavigationInstruction, next: Next) {
console.log(instruction);
if (instruction.config.settings.scrollReset) {
window.scrollTo(0, 0);
}
return next();
}
}
export class App implements ConfiguresRouter {
private router: Router;
configureRouter(config: RouterConfiguration, router: Router) {
config.options.pushState = true;
config.options.root = '/';
config.map([
{ route: ['home'], name: 'home', moduleId: PLATFORM.moduleName('./home/index'), nav: true, title: 'Home' },
/* "scrollReset: true" WORKS HERE */
{ route: ['u/:username'], name: 'user', moduleId: PLATFORM.moduleName('./user/index'), nav: false, title: 'User', settings: { scrollReset: true}},
{ route: '', redirect: 'home' }
]);
this.router = router;
config.addPipelineStep('postcomplete', PostNavigationScrollUp);
}
}
```
Child routes:
```auto
import { PLATFORM } from 'aurelia-pal';
import { RouterConfiguration, Router, RouteConfig } from 'aurelia-router';
export class UserRootView {
private router: Router;
configureRouter(config: RouterConfiguration, router: Router) {
this.router = router;
config.map([
{ route: [''], name: 'profile', moduleId: PLATFORM.moduleName('./profile.component'), nav: false, title: 'Timeline'},
/* "scrollReset: true" DOES NOT WORK HERE */
{ route: ['p/:slug'], name: 'post', moduleId: PLATFORM.moduleName('./post.component'), nav: false, title: 'Post', settings: { scrollReset: true}}
]);
}
}
```
There is only one `console.log` output, and that’s for the parent route:
```auto
NavigationInstruction {plan: null, options: {…}, fragment: '/u/someuser/p/random-post-slug', queryString: '', config: {…}, …}
config:
hasChildRouter: true
moduleId: "./user/index"
name: "user"
nav: false
navModel: NavModel {isActive: true, title: 'User', href: undefined, relativeHref: 'u/:username', settings: {…}, …}
navigationStrategy: undefined
route: "u/:username/*childRoute"
settings: {scrollReset: true}
title: "User"
viewPorts: {default: {…}}
[[Prototype]]: Object
fragment: "/u/someuser/p/random-post-slug"
```
Alternatively, `window.scrollTo()` can just be called in the `activate()` method of the end view component.
That’s by experience with this.