Ionic 4 smooth scroll to anchor

Question

I've got a single landing page with a menu and some sections. Each item in the menu should scroll smoothly to the given section.

My first approach was to do:

window.scrollTo({
  y: this.el.nativeElement.querySelector('app-contact').offsetTop // 600
  behavior: 'smooth'
});

The problem I was facing:

1. Ionic 4 doesn't seem to respond to scrollTo Even if I write window.scrollTo(0, 300), nothing will happen.

2. behavior: 'smooth' is not supported in every browser. Therefore, I can't use this approach.

I was wondering how should I implement a smooth scroll to an anchor using Ionic 4.

Answer 1

Ionic handles scrolling in it's ion-content component.

The content component comes with a few scroll methods like scrollToPoint which might be usefull to you.

To get an IonContent object you need to use ViewChild

import {ViewChild} from '@angular/core'
export class yourPage {
  @ViewChild('ion-content') content: IonContent;
  scroll(x, y) {
    this.content.scrollToPoint(x, y, 300)
  }
}

Or alternatively scrollByPoint if you want to scroll a certain distance