Gopi Nath Gopi Nath - 4 months ago 59
AngularJS Question

angular-wizard scroll to top on click of next

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.

Answer

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.