Scroll to top of page issue


#1

Hi guys,

I’m working on a single page app with dynamically changing UI Elements. I have an issue with scrolling to the top of the page onClick of a button. I’d like to do this because when the user clears the data view, the initial view elements (such as the search button and information panel) should appear back on screen, ready for the user to run a new search.

However, when the user scrolls down the screen on the data view and then clears the view to return to the initial view without scrolling back up, the main view elements (search button and information panel) are out of the view and tucked away at the top of the screen. The user then has to tap on the screen before it snaps back to its regular position. I have tried using the scrollTo jQuery solution and other pure javascript solutions, but i’ve had no success in solving the issue. I know its not ideal but I am using the jQuery library to show and hide various elements on screen. Any help on this would be much appreciated!

Thanks!


#2

Is it possible, could you put together a codpen?


#3

you can use $ionicScrollDelegate.scrollTop(true); when you want to scroll to top

ionic scroll delegate


#4

Thanks for your replies. @chnbohwr I tried using that however, it didn’t work. In the end I ended up changing the css properties of the ‘scroll’ div when the user scrolls.

$(’.scroll’).css(’-webkit-transform’,‘none’);

A bit of a messy solution, but it works pretty well in my application having run some tests.