Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ionic - Scroll to elements of a page [duplicate]

I have a terms page in which included links on the top. The purpose of these links is to scroll to page element that belongs to.

Is there any way to do this dynamically from the component?

like image 609
Panagiotis Koursaris Avatar asked Oct 17 '17 07:10

Panagiotis Koursaris


1 Answers

Eventually there is a scrollTo() method that give you the ability to scroll to any coordinates you want.

In my component I have use the method like this:

export class TermsComponent {
    @ViewChild(Content) content: Content;

    scrollTo(elementId: string) {
        let y = document.getElementById(elementId).offsetTop;
        this.content.scrollTo(0, y);
    }

}

scrollTo() get an argument with the id of the element you want to scroll to.

In my template:

<a (click)="scrollTo('section1')">Section 1</a>
<p id="section1"><b>1. The first element you want to scroll</b></p>

Ionic 4 (Muhammad Tahir):

Use this.content.scrollToPoint(0, y);

like image 83
Panagiotis Koursaris Avatar answered Nov 03 '22 16:11

Panagiotis Koursaris