Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular ui-router scroll to top, not to ui-view

I've just upgraded to ui-router 0.2.8 from 0.2.0 and I've noticed that when the state changes, the scroll position jumps to the top of te child ui-view that is the subject of the new state.

This is fine but I have two problems with it:

1) I have 30px padding between the top of the page and the ui-view and I would like it to scroll to the top of the page, leaving a gap. At the moment it goes exactly to the top of the ui-view which looks ugly. To achieve this I guess I either need to know how to get it to scroll to the top of the div that the ui-view is in (not the browser viewport), or I need to find out how to override $uiViewScroll to scroll to the ui-view minus 30px.

I have tried $uiViewScrollProvider.useAnchorScroll(); but if I do that it doesn't scroll at all. I have also tried <ui-view autoscroll="false">;, which also stops the scrolling completely.

2) It doesn't actually scroll at the moment, just jumps. Is it suppose to scroll or is it up to the developer to do this with CSS transitions?

Any help would really be appreciated :)

like image 524
jonhobbs Avatar asked Mar 10 '14 01:03

jonhobbs


8 Answers

Another approach is to decorate the default $uiViewScroll service, effectively overriding the default behaviour.

app.config(function ($provide) {
  $provide.decorator('$uiViewScroll', function ($delegate) {
    return function (uiViewElement) {
      // var top = uiViewElement.getBoundingClientRect().top;
      // window.scrollTo(0, (top - 30));
      // Or some other custom behaviour...
    }; 
  });
});

And as Hubrus mentioned, for any <ui-view> you do not wish this to apply for, simply add autoscroll="false". I haven't taken a good look into the actual scrolling implementation, I just figured I'd mention the decorator way (it's alot of fun) as an alternative. I'm sure you can work out the exact scrolling behaviour.

like image 194
Kasper Lewau Avatar answered Oct 03 '22 18:10

Kasper Lewau


when ever the path changes the router broadcasts an event: $stateChangeSuccess i.e. the url has changed so just listen to it and use jquery to scroll to the top of the page

$rootScope.$on('$stateChangeSuccess',function(){
    $("html, body").animate({ scrollTop: 0 }, 200);
})

place the above code inside

yourAppName.run(function(){

    //the above code here
 })
like image 27
Rishul Matta Avatar answered Oct 03 '22 20:10

Rishul Matta


So I had this same problem. I have a fixed-top nav bar. If I put autoscroll="true" in the ui-view it would scroll to the top minus the height of the height of the scroll bar.

So I got rid of the style that added the padding to the body for the top navbar

// fixed navigation at top
//body { padding-top: 100px; }

And applied it to the ui-view

[ui-view=main] {
    padding-top: 100px;
}

Now autoscroll="true" works as expected.

like image 35
Martin Avatar answered Oct 03 '22 18:10

Martin


1) I think the easiest way it to put autoscroll="false" on the ui-view and manipulate the scrolling in the $viewContentLoaded event.

2) This is the browser's default behavior on anchors

like image 28
VladN Avatar answered Oct 03 '22 18:10

VladN


Since $stateChangeSuccess seems not to be available anymore in current AngularJS (as 1.2.x) I changed Rishul Mattas example to the following which works fine for me:

app.run(function ($rootScope) {
  $rootScope.$on('$viewContentLoaded',function(){
    jQuery('html, body').animate({ scrollTop: 0 }, 200);
  });
});
like image 38
hoeni Avatar answered Oct 03 '22 20:10

hoeni


Place on top

<div id="top">.....

Code to scroll:

$rootScope.$on('$stateChangeStart', function() {
    $anchorScroll('top');
});
like image 44
user3706408 Avatar answered Oct 03 '22 18:10

user3706408


If one combines Angular + Material Design, this is also required to scroll to top:

app.run(function ($rootScope) {
    $rootScope.$on('$viewContentLoaded', function () {
        $("md-content").animate({ scrollTop: 0 }, "fast"); /* <------- Notice this line */
        jQuery('html, body').animate({ scrollTop: 0 }, 200);
    });
});
like image 31
Elya Livshitz Avatar answered Oct 03 '22 18:10

Elya Livshitz


I think that we don't need scrolling to top if navigating state is child state, so I wrote this:

$rootScope.$on('$stateChangeSuccess',function(_, _, _, os){
    if(!$state.includes(os) || $state.is(os))
        $("html, body").animate({ scrollTop: 0 }, 200);
});
like image 27
karaxuna Avatar answered Oct 03 '22 18:10

karaxuna