set the scroll to top using CSS in Angular4 app - css

Question

In my Angular4 app, when I'm scrolling down some list and click a list item to see details which is on another route, needs to scroll up to go to top of the page.
I have found some answers to set the scroll to top using JQuery. But is it possible to set the scroll to top using CSS(SASS may be) only?

Answer 1

try this, without any css. In your app component(bootstrap) subscribe the router and check event is a instance of NavigationEnd and then scoll window to top
import {Component, ElementRef, Inject} from '#angular/core';
import {NavigationEnd, Router} from '#angular/router';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
elementRef: ElementRef;
constructor(#Inject(ElementRef) elementRef: ElementRef,
private router: Router) {
this.elementRef = elementRef;
router.events.subscribe((myEvent) => {
if (myEvent instanceof NavigationEnd) {
window.scrollTo(0, 0);
}
});
}
}
Here is working plunker : https://plnkr.co/edit/IyO1Cp?p=preview

Answer 2

Here is quick example using css based smooth scrolling only. And here is another SO thread with more answers.
Hope this helps.
html {
scroll-behavior: smooth
}
a {
display: block;
background: #fff;
padding: 4px;
}
div {
height: 1000px;
width: 200px;
padding: 4px;
}
#red {
background: red;
}
#blue {
background: blue;
}
#green {
background: green;
}
#yellow {
background: yellow;
}
<a name="top"></a>
Red
Blue
Green
Yellow
<div id="red">Top</div>
<div id="blue">Top</div>
<div id="green">Top</div>
<div id="yellow">Top</div>