Scolling to anchor via anchorScroll() moves scrollable area of screen


I’m currently working on a page containing an unknown list of card elements (posts), each of which have unique IDs for the content within, and I’m aiming to create an effect where if I have an ID available in the controller the page will scroll to that element once the list has rendered.

Currently I’ve added an anchor tag to each card with the post’s unique ID as an ID, setting the url hash using $location.hash and using $ionicScrollDelegate.anchorScroll(true) to scroll to that point. This works to a degree, but the viewport/scrollable area appears to move down (as if y = 0 has moved down the page) meaning I can’t scroll to the top half of the page, but I can scroll off the bottom.

Is there any obvious reason for this, or a better alternative solution? I’m not even too bothered about a scroll animation, I just want the selected post to be at the top of the screen. Thanks!

Edit: The effect works okay ~90% of the time in the browser (Chrome via ionic serve) but fails 100% of the time when installed on an Android device (not in ionic view)


did you find a solution , have the same issue


I ended up adding an anchor element for each item on the page, and used getBoundingClientRect() and scrollTo(). The code is here -