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

27
votes

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 }
    })
5
javascriptcssangularjsexpressangular-ui-router

5 Answers

41
votes

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>
10
votes

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);

});



}]);
7
votes

in the run block add:

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

Of course you have to inject the $anchorScroll dependency

5
votes

In your App routing module, Add the following to RouterModule

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

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.