Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 4: Scroll to top of page programmatically

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.

like image 769
Black Dynamite Avatar asked Aug 13 '17 00:08

Black Dynamite


People also ask

How do I scroll to top in typescript?

body. scrollTop || 0; console. log('[scroll]', scrollPosition);

How do you scroll to the top in HTML?

window. scrollTo(0, 0); …is a sure bet to scroll the window (or any other element) back to the top.

How do I scroll an element into a div?

// 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.

How do I scroll to top in ionic?

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.


1 Answers

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

  • xCoord is the pixel along the horizontal axis.
  • yCoord is the pixel along the vertical axis.
like image 112
Dr. X Avatar answered Sep 19 '22 14:09

Dr. X