Can't figure out why page loads at bottom? Angular UI-Router autoscroll Issue

Question

For the life of me, I cannot figure out why this home page loads at the bottom. Is this an angular ui-router, angular, javascript or CSS issue? I've been stuck on this for two hours and not knowing why my html page loads at the bottom instead of the top is really killing my self-esteem as a programmer :/

Here is the home page: [ URL Redacted ]

UPDATE -- I solved this issue. It was with Angular UI-Router. See my answer below for the simple fix.

I use Angular and Angular UI-Router and the set up looks like this...

default.jade

  doctype html
  html(lang='en', xmlns='http://www.w3.org/1999/xhtml', xmlns:fb='https://www.facebook.com/2008/fbml', itemscope='itemscope', itemtype='http://schema.org/Product')
  include ../includes/head
  body(ng-controller="RootController")
  block content
  include ../includes/foot

index.jade

extends layouts/default

block content
  section.container
    div(ui-view="header")
    div(ui-view="content")
    div(ui-view="footer")

Angular Config.js

window.app.config(function($stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to "/"
$urlRouterProvider.otherwise("/");
// Now set up the states
$stateProvider
    .state('home', {
      url: "/",
      views: {
        "header":    { templateUrl: "views/header/home.html"   },
        "content":   { templateUrl: "views/content/home.html"  },
        "footer":    { templateUrl: "views/footer/footer.html" }
      },
      resolve: { factory: setRoot }
    })
    .state('signin', {
      url: "/signin",
      views: {
        "header":    { templateUrl: "views/header/signin.html"   },
        "content":   { templateUrl: "views/content/signin.html"  },
        "footer":    { templateUrl: "views/footer/footer.html" }
      },
      resolve: { factory: setRoot }
    })

score 42 · Accepted Answer · edited Dec 03 '14 at 16:46

42

Angular UI-Router recently updated it's app so that it automatically scrolls down to new views loaded by default. This was causing my app's pages to load scrolled down. To turn this off simply add the following attribute to your ui-view:

<div ui-view="header" autoscroll="true"></div>

edited Dec 03 '14 at 16:46

O'Mutt

1,557
1
13
27

answered Feb 12 '14 at 18:35

ac360

7,735
13
52
91

1

I had the issue OP describes, and this worked for me, I did have to add this attribute on several of my child.siblings[n] ui-view div's. – Brian Vanderbusch Feb 13 '14 at 20:33
5

Since this posting, ui-router has changed the default action of autoscroll. The `autoscroll="false"` setting now retains the scroll position when it loads a new view. However `autoscroll="true"` will load the top of the new view. – user1445240 Oct 08 '14 at 16:04
2

This solution perfectly worked for me. But when I use the browser back button to load the previous page it also scrolling to the top because of the autoscroll='true' . What is the solution for that? – Vysakh V K Oct 06 '15 at 05:29
Hi, for some reason this autoscroll is not working for me. I have a ui-view which loads a nested ui-view (3 views: header, content and footer). When I go to a state that reloads the content view and scroll half way, then reload my browser it will auto scroll back to that exact position. I have tried everything up to making a scrollTop directive using the $uiViewScroll(element). Nothing is working. It is kind of driving me insane right now. I just always want to start at the top of the screen but I can't seem to circumvent this autoscroll feature. Does anybody have a solution for me? – Mattijs Jan 28 '16 at 07:17
unbelievable. I can only say to myself: RTF. I wasn't using an expression in the autoscroll. I used `autoscroll="false"` instead of `autoscroll=" 'false' "`. Easy to overlook. Maybe something to catch in the code? Convert it to an expression if it is a boolean – Mattijs Jan 29 '16 at 01:20
For me, neither `autoscroll="true"` nor `autoscroll="false"` accomplishes what I need. What if I want the app to load at the very top of the window every time (not the top of a view), regardless of where they were scrolled in the previous view? – Kyle Vassella Jun 20 '18 at 21:46

score 10 · Answer 2 · answered Mar 04 '14 at 08:26

10

here is a possible solution, i used a workoround, since auto scrolling wasnt working for me, so i forced my view to scroll to top. Hope this helps.

app.run(['$window', '$rootScope', '$location' ,'$cookieStore', '$state', 'CacheManager',  '$timeout', function($window, $rootScope, $location, $cookieStore, $state,CacheManager, $timeout){


$rootScope.$on('$viewContentLoaded', function(){

var interval = setInterval(function(){
  if (document.readyState == "complete") {
      window.scrollTo(0, 0);
      clearInterval(interval);
  }
},200);

});



}]);

answered Mar 04 '14 at 08:26

Karan Khanna

209
1
5
11

6

This worked for me. I was also able to remove simply to the below which works fine and removed the 200ms delay... `$rootScope.$on('$viewContentLoaded', function(){ window.scrollTo(0, 0); });` – Erik Olson Apr 06 '14 at 22:18
1

A better solution is to use $anchorScroll() than window.scrollTo. I am using anchor scroll now and it work. "$rootScope.$on("$viewContentLoaded", function(){ $anchorScroll(); });" – Karan Khanna Apr 07 '14 at 22:35
"$rootScope.$on("$viewContentLoaded", function(){ $anchorScroll(); });" Doesn't work for me. But this WORKS: $rootScope.$on('$viewContentLoaded', function(){ window.scrollTo(0, 0); }); Simple and efficient :) Thanks for the solutions. – Claudiu Sep 11 '14 at 15:06

score 7 · Answer 3 · edited Aug 21 '15 at 13:00

7

in the run block add:

$rootScope.$on('$stateChangeSuccess', function () {
  $anchorScroll();
 });

Of course you have to inject the $anchorScroll dependency

edited Aug 21 '15 at 13:00

Seth

10,198
10
45
68

answered Nov 13 '14 at 07:44

Christina

1,136
11
16

1

with ui-router it should be "stateChangeSuccess", as "routeChangeSuccess" is for ng-router I guess ? – hugsbrugs May 20 '15 at 12:21

score 7 · Answer 4 · answered Feb 12 '20 at 22:21

7

In your App routing module, Add the following to RouterModule

RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'})

answered Feb 12 '20 at 22:21

RRR

111
1
4

But why does this happen? It works without this attribute at times – Srinath Kamath Apr 19 '21 at 09:54

score 0 · Answer 5 · edited Feb 11 '14 at 21:29

0

I ran into this issue a while ago. What is happening is you are on page 1, scrolled down the page I imagine, then click a button to go to page 2. The router then doesn't readjust your scroll position when you go to the next page. I fixed this by scrolling to top on all route changes.

edited Feb 11 '14 at 21:29

Bojangles

99,427
50
170
208

answered Feb 11 '14 at 21:28

Mindstormy

490
4
14

2

Adding example code showing what you did would improve the quality of this answer – Bojangles Feb 11 '14 at 21:29
I edited out because it doesn't add anything to the answer. If you didn't have time to write a full answer, perhaps you should've just made a comment instead? – Bojangles Feb 11 '14 at 21:45
1

I read and understood it purely as noise, much the same way that "hi", "thanks" and "hope that helps" – Bojangles Feb 11 '14 at 22:29
That is one solution Mindstormy. Thank you for trying to help :) – ac360 Feb 11 '14 at 23:57
1

it might help to add code to your answer, because you're not actually giving any solution. – mpm May 16 '14 at 06:07

Can't figure out why page loads at bottom? Angular UI-Router autoscroll Issue

5 Answers5

Linked