AngularJS Scroll to element prevent browser from jumping

Question

I've written an app that has a list of blocks.

Each block contains links to other blocks. When a link to a block is clicked e.g #/home/page-19, the page animates down/up depending on current position.

This all currently works but when the anchor is clicked and the route updates, the browser jumps to the top and then animates down, I need it to animate from its current position.

I've written a directive that adds preventDefault to all anchors.

See JS fiddle below. http://jsfiddle.net/ygNWF/10/

Stripped down code:

HTML:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

<body ng-app="app" ng-controller="appController">
    <script type="text/ng-template" id="home-template">
       <div class="page" id="page-17" >
              <div class="page-inner" ng-style="style()" resize><a href="#/home/page-18">Page 18</a></div>
          </div>
          <div class="page" id="page-18">
              <div class="page-inner" ng-style="style()" resize><a href="#/home/page-19">Page 19</a></div>
          </div>
          <div class="page" id="page-19">
              <div class="page-inner" ng-style="style()" resize><a href="#/home/page-20">Page 20</a></div>
          </div>
          <div class="page" id="page-20">
              <div class="page-inner" ng-style="style()" resize><a href="#/home/page-17">Page 17</a></div>
          </div>
    </script>

    <div class="wrapper">
      <div class="view" ng-view scroll></div>
    </div>
</body>

javascript:

var app = angular.module('app', []);

/*
  Controllers
*/
app.controller( 'appController', function( $scope ) {

});
app.controller( 'routeController', function( $scope, $routeParams ) {
  //When route change, check if page has been updated and run animateScroll directive
  if(typeof $routeParams !== 'undefined' && $routeParams.page.length > 0){
    $scope.animateScroll($routeParams.page);
  }
});

/*
  Page routes
*/
app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/home/:page', {
        templateUrl: 'home-template',
        controller: 'routeController'
      })

      .otherwise({
        redirectTo: '/home/'
      });
}]);

/*
  Directives
*/
app.directive('scroll', function ($routeParams, $timeout) {
  /* 
  Scroll to element ID
  */
  return {
    restrict: 'A',
    link: function(scope, elm, attrs) {
      scope.animateScroll = function(page) {
        $timeout(function(){
          console.log('test');
          if(jQuery('#' + page).length == 1){
            jQuery('html, body').animate({
              scrollTop:  jQuery('#' + page).position().top
            }); 
          };
        }, 1);
      };
    }
  };
});

app.directive('resize', function ($window) {
  return function (scope, element) {
    var w = angular.element($window);

    scope.getWindowDimensions = function () {
      return { height: w.height() };
    };

    scope.$watch(scope.getWindowDimensions, function (dimensions) {
        scope.windowHeight = dimensions.height;
        scope.style = function () {
          return { 
              'min-height': scope.windowHeight + 'px'
          };
        };
    }, true);

    w.bind('resize', function () {
      scope.$apply();
    });
  }
});

app.directive('a', function() {
  return {
    restrict: 'E',
    link: function(scope, elem, attrs) {
      elem.on('click', function(e){
        e.preventDefault();
      });
    }
  };
});

Page layout example:

enter image description here

IgorCh · Accepted Answer · 2013-11-19 14:21:50Z

5

I'm not sure that scrolling should be mixed with routing. I would better do something like this: 1. use ng-click instead of href, and href="javascript:" (it is necessary if you support IE8) 2. use function for scrolling down that receives id of the element.

an example below

http://jsfiddle.net/naS4U/

answered Nov 19, 2013 at 14:21

IgorCh

2,6615 gold badges23 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

CharliePrynn Over a year ago

I had this feeling. The only problem is, I need the URLS to link to the pages.

IgorCh Over a year ago

ah, ok, maybe it isn't looks great, but you can store current scroll position before redirect to new url, and after redirect move scroll to that position without delay, after that animate smooth scrolling to the selected page.

C. S. Over a year ago

I just ran into this issue. I used href="javascript:void()" title="#idvalue"; this way you can retrieve the attribute title in old browsers as well and apply it however you like

IgorCh Over a year ago

@C.S., It is better not to use the title attribute this way, because "#idvalue" will be shown on hover state, try to use data-link attribute, or some another data-* attribute.

Collectives™ on Stack Overflow

AngularJS Scroll to element prevent browser from jumping

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related