AngularJS ui-router, scroll to next step on state change

Question

I\'m using UI-router in my app and I\'d like to so a simple \"scrollTo\" to an anchor when the URL/state changes. I don\'t want to load the next step from a template, or load a

Answer 1

First. You need to define the state.

.state('step1', {
    url: '/step-1'
})

---

Add onEnter controller (so you can $inject things).

.state('step1', {
    url: '/step-1',
    onEnter: function () {}
})

---

Animate (or simply scroll) to element

$('html, body').animate({
    scrollTop: $("#step1").offset().top
}, 2000);

---

Here the example