I am using this plugin https://github.com/mgonto/angular-wizard to create a multi step form in my ionic application . The problem is the page stays in the bottom when I move from one step to another . How can I make to page to scroll top when ever i switch between steps.
-
You can have a look at all the suggestions here : http://stackoverflow.com/questions/21055952/changing-route-doesnt-scroll-to-top-in-the-new-page – DavidP Aug 02 '16 at 13:12
2 Answers
There is a on-finish
directive you could use to trigger a scroll to top (use it like a ng-click
- binding a function as directive value).
on-finish: Here you can put a function to be called when the wizard is finished. The syntax here is very similar to ng-click
Or bind the same functions on a step directive:
wz-previous
/ wz-cancel
/ wz-finish
/ wz-reset
Small example on view
// In this case, the scrollToTop() function will be called before going to the next step.
<input type="button" wz-next="scrollToTop()" value="Next" />
Scroll to top in controller
Inside that function binded through that on-finish
directive, you can apply the scroll to top.
Just inject $anchorScroll
as a dependency to the controllers constructor, and call $anchorScroll()
whenever you want to scroll to top.

- 3,752
- 1
- 19
- 33
-
1Hi thanks for the answer.I was able to find the solution and now the page is scrolling top when I move from one step to another. This is what I am doing. and in my controller I have added like this $scope.scrollTop=function(){ $ionicScrollDelegate.scrollTop(); }; – Gopi Nath Aug 03 '16 at 07:42
Hi thanks for the answer.I was able to find the solution and now the page is scrolling top when I move from one step to another. This is what I am doing.
<input type="button" wz-next="scrollToTop()" value="Next" />
and in my controller I have added like this
$scope.scrollTop=function(){
$ionicScrollDelegate.scrollTop();
};

- 413
- 3
- 7
- 21