Scroll up on pageChange event.

Angular version: ^6.0.0

ngx-pagination version: ^3.1.1

Description of issue: On each page change i want to scroll up to top of my component page, how can i access the pageChange event or maybe i can do this another way? I have noticed that in your examples your page doesn’t change any kind of position via CSS either, so i am wondering if it is possible at all or not.

Steps to reproduce: Basic example from demos

Expected result: I need to scroll up to top of component html page when page changes. Actual result: Page stays at same position when page changes.

Demo: (if possible, edit this StackBlitz demo and paste the link to your fork)

Any relevant code:

[michaelbromley]

I mean something like this:

<pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>

onPageChange(page: number) {
   this.currentPage = page;
   window.scrollTo(0, 0);
}

[snblackout]

In Angular Ionic, do the following:

Import Content view:

@ViewChild(Content) content: Content;

Create a function to scroll to an element ID:

scrollTo(element: string) {
    let elem = document.getElementById(element);
    if (elem) {
      var box = elem.getBoundingClientRect();

      var body = document.body;
      var docEl = document.documentElement;

      var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
      var clientTop = docEl.clientTop || body.clientTop || 0;
      var top = box.top + (scrollTop - clientTop) - 56;

      this.content.scrollTo(0, top, 500);
    }
  }

Do the scrolling call:

this.scrollTo("page-header");