Angular 4: Scroll to top of page programmatically

Question

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.

Do you wanna scroll smoothly?

Ploppy
– Ploppy

2017-08-13 00:12:40 +00:00
Commented Aug 13, 2017 at 0:12 — Ploppy
– Ploppy, Commented Aug 13, 2017 at 0:12

Lazar Ljubenović · Accepted Answer · 2017-08-13 00:19:22Z

21

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.

edited Aug 13, 2017 at 0:19

Lazar Ljubenović

19.9k10 gold badges58 silver badges95 bronze badges

answered Aug 13, 2017 at 0:13

Dr. X

2,9402 gold badges18 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Black Dynamite Over a year ago

Thanks, that was the solution.

Onen simon Over a year ago

You could also use the scrollTo(options) where options is a ScrollToOptions i.e. window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });

Dr. X · Accepted Answer · 2017-08-13 00:15:29Z

2

You don't need additional library to do this. A standard HTML tag will be sufficient by using below syntax

<div id="place">
   Something.....
</div>

<a target="#place">Click Here .....!</a>

answered Aug 13, 2017 at 0:15

Dr. X

2,9402 gold badges18 silver badges37 bronze badges

Collectives™ on Stack Overflow

Angular 4: Scroll to top of page programmatically

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related