1

I am looking for default angular property for scroll into top of the window while route changes apart from using js functions like(window.scroll,el.scrollIntoView).After searching on internet I found some useful properties like ngx-page-scrolll,but it navigated based on creating the html element instance.How can I navigate into top of the window by using any of the angular scroll property?

Vega
  • 27,856
  • 27
  • 95
  • 103
Pranab V V
  • 1,386
  • 5
  • 27
  • 53
  • Does this answer your question? [Angular 5 Scroll to top on every Route click](https://stackoverflow.com/questions/48048299/angular-5-scroll-to-top-on-every-route-click) – Vega Apr 22 '20 at 05:22

1 Answers1

1

Bias note: I'm the creator of the mentioned ngx-page-scroll library.

Using the PageScrollService that is exported from the module you can trigger scrolls without the need to create HTML Elements.

The following simple example shows, how to create a so called pageScrollInstance (an object containing all relevant information to perform a scroll operation) that scrolls to an element with id top:

 constructor(private pageScrollService: PageScrollService, @Inject(DOCUMENT) private document: any) {
 }

 public goToHead(): void {
     let pageScrollInstance: PageScrollInstance = PageScrollInstance.simpleInstance(this.document, '#top');
     this.pageScrollService.start(pageScrollInstance);
 };

You may just trigger that goToHead() to start the scroll animation.

More details and how to set it up can be found in the documentation: https://github.com/Nolanus/ngx-page-scroll#service

Capricorn
  • 2,061
  • 5
  • 24
  • 31
  • Is there a way to reference a angular dialog as the document? When I use the code right now it grabs the entire document. I would like this functionality inside the dialog only. – Avinash Prabhakar Aug 30 '18 at 17:26
  • 1
    It's possible. Please check the documentation or [this github ticket](https://github.com/Nolanus/ngx-page-scroll/issues/273) and there's also an example in the demo app (tab "nested scrolling"). In case you still have problems, please create a new SO question or github issue. – Capricorn Aug 30 '18 at 19:52