There are some solutions, make sure to check them all 🙂 Option1: The router outlet will emit the activate event any time a new component is being instantiated, so we could use (activate) to scroll (for example) to the top: app.component.html <router-outlet (activate)=”onActivate($event)”></router-outlet> app.component.ts onActivate(event) { // window.scroll(0,0); window.scroll({ top: 0, left: 0, behavior: ‘smooth’ … Read more
They are both going to have the same effect. However, as pointed out in the comments: $(window).scrollTop() is supported by more web browsers than $(‘html’).scrollTop().
To do this, you can set a callback function for the animate command which will execute after the scroll animation has finished. For example: var body = $(“html, body”); body.stop().animate({scrollTop:0}, 500, ‘swing’, function() { alert(“Finished animating”); }); Where that alert code is, you can execute more javascript to add in further animation. Also, the ‘swing’ … Read more
Firefox places the overflow at the html level, unless specifically styled to behave differently. To get it to work in Firefox, use $(‘body,html’).animate( … ); Working example The CSS solution would be to set the following styles: html { overflow: hidden; height: 100%; } body { overflow: auto; height: 100%; } I would assume that … Read more