2

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.

Gopi Nath
  • 413
  • 3
  • 7
  • 21
  • 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 Answers2

1

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.

daan.desmedt
  • 3,752
  • 1
  • 19
  • 33
  • 1
    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. and in my controller I have added like this $scope.scrollTop=function(){ $ionicScrollDelegate.scrollTop(); }; – Gopi Nath Aug 03 '16 at 07:42
0

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(); 
};
Gopi Nath
  • 413
  • 3
  • 7
  • 21