Does anyone know how to use Angular 4 and programmatically scroll the page to the top? My usescase is that I have a search page, and the input is at the top, and links to the other search results pages are at the bottom. When the user clicks a link (2,3,4...) I would like the page to populate with the new results (functionality is complete) and then scroll to the top of the page to show the results (this functionality is not complete).
I've see that this is possible with JQuery (Scroll to top of page) but I was wondering if there was a way to stay in the Angular 4 stack.
Any help is greatly appreciated.
body. scrollTop || 0; console. log('[scroll]', scrollPosition);
window. scrollTo(0, 0); …is a sure bet to scroll the window (or any other element) back to the top.
// get the "Div" inside which you wish to scroll (i.e. the container element) const El = document. getElementById('xyz'); // Lets say you wish to scroll by 100px, El. scrollTo({top: 100, behavior: 'smooth'}); // If you wish to scroll until the end of the container El. scrollTo({top: El.
First step is to achieve the go to top button or scroll to top or bottom button is the scroll-events property of ion-content. This property allows ion-content to listen the scroll events like scroll-start, scroll-end and apply scroll methods to scroll the page to the particular position of the page.
Just use the native JavaScript window.scrollTo method -- passing in 0,0 will scroll the page to the top left instantly.
window.scrollTo(xCoord, yCoord);
Parameters
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With