$anchorScroll in Ionic 2? Scroll to element with ID

Question

any way to do $anchorScroll in ionic 2/Angular2 as of Angular 1.x?

Trying to scroll to an element on page. I tried something like ng2-page-scroll https://github.com/Nolanus/ng2-page-scroll

not sure if i m doing it right, i followed through the tutorial and got error:

ParseError: 'import' and 'export' may appear only with 'sourceType: module'

I think that doesnt work with the latest ionic 2 release anymore. only wish there's an easier way of doing it, any work around?

Answer 1

I was in the same situation, where I wanted to scroll to the next page/element for each click of a button.

I looked at the same options you mentioned, and I found that in ion-slides (http://ionicframework.com/docs/v2/api/components/slides/Slides/), you can set the direction to 'vertical', which did the trick for me.

Don't know if it can help your use case.

Otherwise, you can look into Content, and the scrollTo function. http://ionicframework.com/docs/v2/api/components/content/Content/

Answer 2

I don't know if you are still facing this issue, but this can be solved it using YourHTMLelement.getBoundingClientRect(), which returns the bounds of that element as top, right, bottom and left.

With that, you can use content and scrollTo(left, top, duration) function. I created a function to scroll vertically to a specific element, which looks like:

scrollToElement(id) { 
    var el = document.getElementById(id);
    var rect = el.getBoundingClientRect();
    // scrollLeft as 0px, scrollTop as "topBound"px, move in 800 milliseconds
    this.content.scrollTo(0, rect.top, 800);
}

But you can change it the way you want to also scroll horizontally, with the scrollLeft parameter.