jquery – AngularJS Scroll to element阻止浏览器跳转

我写了一个包含块列表的应用程序.

每个块包含指向其他块的链接.
当点击一个块的链接,例如#/ home / page-19时,该页面根据当前位置向下/向上设置动画.

这一切目前都有效但是当点击锚点并且路线更新时,浏览器跳到顶部然后动画下来,我需要它从当前位置动画.

我写了一个指令,将preventDefault添加到所有锚点.

请参阅下面的JS小提琴.
http://jsfiddle.net/ygNWF/10/

剥离代码：

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',elem,attrs) {
      elem.on('click',function(e){
        e.preventDefault();
      });
    }
  };
});

页面布局示例：

解决方法

我不确定滚动应该与路由混合.我最好这样做：
1.使用ng-click而不是href,并使用href =“javascript：”(如果你支持IE8,这是必要的)
2.使用向下滚动的函数接收元素的id.

以下是一个例子

http://jsfiddle.net/naS4U/

jquery – AngularJS Scroll to element阻止浏览器跳转

解决方法

相关推荐