Scroll to top about md-steppers

[jpnkicker14]

@ipiz Thanks for the quick reply!
Unfortunately I couldn't get it to work quite right (possibly because of my specific layout where the steps are inside a scrollable div). But, I found an angular scroll directive (https://github.com/oblador/angular-scroll) that ended up working just fine.

[roelbarreto]

@jpnkicker14 you can use $anchorScroll and $location.hash

<div id="the-anchor">
    <md-steppers>
        <md-step>
            <!-- code here -->
            <md-button ng-click="vm.saveStepAndForward('the-anchor')">
        </md-step>
        <md-step>
            <!-- code here -->
            <md-button ng-click="vm.saveStepAndForward('the-anchor')">
        </md-step>
    </md-steppers>
</div>

//example
function gotoAnchor(x) {
    var newHash = x;
    if ($location.hash() !== newHash) {
        // set the $location.hash to `newHash` and
        // $anchorScroll will automatically scroll to it
        $location.hash(x);
    } else {
        // call $anchorScroll() explicitly,
        // since $location.hash hasn't changed
        $anchorScroll();
    }
}
vm.saveStepAndForward = saveStepAndForward;
function saveStepAndForward(anchor) {
    vm.stepBusy = true;
    gotoAnchor(anchor);
    $timeout(function () {
        vm.activeStep = 2;
        vm.steps.step1.completed = true;
        vm.steps.step2.enabled = true;
        vm.stepBusy = false;
    }, 1000);
}

[roelbarreto]

@jpnkicker14 here is a fiddle for you:

https://jsfiddle.net/vcdbuyru/3/