Smooth Scrolling for Autoscroll in UI-Router

Question

Is there a way to get the functionality of ui-router's autoscroll with smooth scrolling instead of jumping immediately to that place?

Or is there a way to add an eventlistener to all states that's fired when the state is changed in a way that I get access to the ui-view's element?

Answer 1

Something like this should work. You might have to tweak the target.offset().top a bit if you have a fixed header or something similar that might mess with the offset.

app.config(function ($provide) {
  $provide.decorator('$uiViewScroll', function ($delegate) {
    return function (uiViewElement) {
        $('html,body').animate({
            scrollTop: uiViewElement.offset().top
        }, 500);
    };
  });
});

Keep autoscroll="true" on your ui-view.

See other answer for credit on the prodiver: Angular ui-router scroll to top, not to ui-view.