Changing route doesn t scroll to top in the new page

Question

I  39 ve found some undesired  at least for me  behaviour when the route changes  In the step 11 of the tutorial http   angular github io angular-phonecat step-11 app   phones you can see the list of phones  If you scroll to the bottom and click on one of the latest  you can see that the scroll isn  39 t at top  instead is kind of in the middle   I  39 ve found this in one of my apps too and I was wondering how can I get this to scroll to the top  I can do it mannually  but I think that there should be other elegant way to do this which I don  39 t know   So  is there an elegant way to scroll to the top when the route changes

User · Answer

All of the answers above break expected browser behavior. What most people want is something that will scroll to the top if it's a "new" page, but return to the previous position if you're getting there through the Back (or Forward) button.

If you assume HTML5 mode, this turns out to be easy (although I'm sure some bright folks out there can figure out how to make this more elegant!):

// Called when browser back/forward used
window.onpopstate = function() { 
    $timeout.cancel(doc_scrolling); 
};

// Called after ui-router changes state (but sadly before onpopstate)
$scope.$on('$stateChangeSuccess', function() {
    doc_scrolling = $timeout( scroll_top, 50 );

// Moves entire browser window to top
scroll_top = function() {
    document.body.scrollTop = document.documentElement.scrollTop = 0;
}

The way it works is that the router assumes it is going to scroll to the top, but delays a bit to give the browser a chance to finish up. If the browser then notifies us that the change was due to a Back/Forward navigation, it cancels the timeout, and the scroll never occurs.

I used raw document commands to scroll because I want to move to the entire top of the window. If you just want your ui-view to scroll, then set autoscroll="my_var" where you control my_var using the techniques above. But I think most people will want to scroll the entire page if you are going to the page as "new".

The above uses ui-router, though you could use ng-route instead by swapping $routeChangeSuccess for$stateChangeSuccess.

User · Answer

If you use ui-router you can use  on run    rootScope  on   stateChangeSuccess   function  event  currentState  previousState         window scrollTo 0  0

User · Answer

After an hour or two of trying every combination of ui-view autoscroll true   stateChangeStart   locationChangeStart   uiViewScrollProvider useAnchorScroll     provide   uiViewScroll         and many others  I couldn t get scroll-to-top-on-new-page to work as expected   This was ultimately what worked for me  It captures pushState and replaceState and only updates scroll position when new pages are navigated to  back forward button retain their scroll positions     run function  anchorScroll   window         hack to scroll to top when navigating to new URLS but not back forward   var wrap   function method        var orig    window window history method        window window history method    function           var retval   orig apply this  Array prototype slice call arguments           anchorScroll          return retval                wrap  pushState      wrap  replaceState

User · Answer

None of the answer provided solved my issue  I am using an animation between views and the scrolling would always happen after the animation  The solution I found so that the scrolling to the top happen before the animation is the following directive   yourModule directive  scrollToTopBeforeAnimation      animate   function   animate        return           restrict   A           link  function   scope  element                 animate on  enter   element  function  element  phase                     if  phase      start                          window scrollTo 0  0                                                             I inserted it on my view as follows     lt div scroll-to-top-before-animation gt       lt div ng-view class  view-animation  gt  lt  div gt   lt  div gt

User · Answer

FYI for for anyone coming across the problem described in the title  as I did  who is also using  the AngularUI Router plugin     As asked and answered in this SO question  the angular-ui router jumps to the bottom of the page when you change routes  Can  39 t figure out why page loads at bottom  Angular UI-Router autoscroll Issue  However  as the answer states  you can turn off this behavior by saying autoscroll  false  on your ui-view    For example     lt div ui-view  pagecontent  autoscroll  false  gt  lt  div gt   lt div ui-view  sidebar  autoscroll  false  gt  lt  div gt     http   angular-ui github io ui-router site   api ui router state directive ui-view

User · Answer

A little late to the party  but I ve tried every possible method  and nothing worked correctly  Here is my elegant solution   I use a controller that governs all my pages with ui-router  It allows me to redirect users who aren t authenticated or validated to an appropriate location  Most people put their middleware in their app s config  but I required some http requests  therefore a global controller works better for me   My index html looks like    lt main ng-controller  InitCtrl  gt       lt nav id  top-nav  gt  lt  nav gt       lt div ui-view gt  lt  div gt   lt  main gt    My initCtrl js looks like   angular module  MyApp   controller  InitCtrl   function  rootScope   timeout   anchorScroll         rootScope  on   locationChangeStart   function event  next  current              middleware              rootScope  on   locationChangeSuccess   function             timeout function                  anchorScroll  top-nav                             I ve tried every possible option  this method works the best

User · Answer

The problem is that your ngView retains the scroll position when it loads a new view  You can instruct  anchorScroll to  scroll the viewport after the view is updated   the docs are a bit vague  but scrolling here means scrolling to the top of the new view    The solution is to add autoscroll  true  to your ngView element    lt div class  ng-view  autoscroll  true  gt  lt  div gt

User · Answer

This code worked great for me    I hope it will also work great for you    All you have to do is just inject  anchorScroll to your run block and apply listener function to the rootScope like I have done in the below example       angular module  myAngularApp    run function  rootScope  Auth   state   anchorScroll        rootScope  on   locationChangeSuccess   function             anchorScroll              Here s the calling order of Angularjs Module    app config   app run   directive s compile functions  if they are found in the dom  app controller   directive s link functions  again  if found    RUN BLOCK  get executed after the injector is created and are used to kickstart the application   it means when you redirected to the new route view  the listener in the run block calls the       anchorScroll     and you can now see the scroll starts to the top with the new routed view

User · Answer

I found this solution  If you go to a new view the function gets executed   var app   angular module  hoofdModule     ngRoute          app controller  indexController   function   scope   window             scope  on   viewContentLoaded   function                   window scrollTo 0  0

User · Answer

you can use this javascript   anchorScroll

User · Answer

Just put this code to run   rootScope  on   routeChangeSuccess   function  event  currentRoute  previousRoute         window scrollTo 0  0

User · Answer

Setting autoScroll to true did not the trick for me  so I did choose another solution  I built a service that hooks in every time the route changes and that uses the built-in  anchorScroll service to scroll to top  Works for me  -    Service     function          use strict        angular          module  mymodule            factory  pageSwitch   pageSwitch        pageSwitch  inject      rootScope     anchorScroll         function pageSwitch  rootScope   anchorScroll            var registerListener     once function                  rootScope  on   locationChangeSuccess   scrollToTop                        return               registerListener  registerListener                     function scrollToTop                  anchorScroll                            Registration   angular module  mymodule   run   pageSwitch   function  pageSwitch        pageSwitch registerListener

User · Answer

This Worked for me including autoscroll   lt div class  ngView  autoscroll  true   gt

User · Answer

Try this http   ionicframework com docs api service  ionicScrollDelegate   It does scroll to the top of the list scrollTop

User · Answer

Here is my  seemingly  robust  complete and  fairly  concise solution  It uses the minification compatible style  and the angular module NAME  access to your module    angular module  yourModuleName   run    rootScope     anchorScroll    function   rootScope   anchorScroll         rootScope  on   locationChangeSuccess   function                      anchorScroll                   PS I found that the autoscroll thing had no effect whether set to true or false

User · Answer

I have finally gotten what I needed   I needed to scroll to the top  but wanted some transitions not to    You can control this on a route-by-route level  I m combining the above solution by  wkonkel and adding a simple noScroll  true parameter to some route declarations   Then I m catching that in the transition     All in all  This floats to the top of the page on new transitions  it doesn t float to the top on Forward   Back transitions  and it allows you to override this behavior if necessary   The code   previous solution plus an extra noScroll option        hack to scroll to top when navigating to new URLS but not back forward   let wrap   function method        let orig    window window history method        window window history method    function           let retval   orig apply this  Array prototype slice call arguments          if  state current  amp  amp   state current noScroll            return retval                 anchorScroll          return retval                wrap  pushState      wrap  replaceState      Put that in your app run block and inject  state    myApp run function  state         Then  If you don t want to scroll to the top of the page  create a route like this    state  someState       parent   someParent     url   someUrl     noScroll   true    Notice this parameter here

User · Answer

Using angularjs UI Router  what I m doing is this        state  myState             url    myState           templateUrl   app views myState html           onEnter  scrollContent          With   var scrollContent   function            Your favorite scroll method here      It never fails on any page  and it is not global

User · Answer

Simple Solution  add scrollPositionRestoration in the main route module enabled  Like this   const routes  Routes            path   registration      loadChildren       gt  RegistrationModule          NgModule     imports       RouterModule forRoot routes  scrollPositionRestoration  enabled          exports     RouterModule          export class AppRoutingModule

[javascript] Changing route doesn't scroll to top in the new page

Examples related to javascript

Examples related to angularjs

Examples related to scroll

Examples related to angularjs-routing