$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?

Astigmatism

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/

Maldon

i am however dealing with a lot of JSON info with *ngFor, using slides will cause performance issues. but i guess your answer was the closest workaround we hv with ionic2. scrollTo only works for me when i use it store and load "last viewed" scroll positions... since it couldnt get the element's location, a fluid layout on different devices/screen sizes would defeat the purpose... but thx for the suggestion. – Astigmatism

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.

Parcheesi

I'm having problems with el.getBoundingClientRect() giving not reliable results. A simple el.offsetTop does the trick for me. – Bev