Question

我制作了一个包含子页面的单页应用。

这个想法是，我有网站，如家，关于和联系。然后每个页面都有多个块。

当页面加载时，块被设置为最小高度。最小高度是窗口高度。这是动态的，因此当您调整大小时，将重置最小高度。

目前，路线为＃/ home /：blockId

当有人转到http://www.test.com/#/home/page-17时，应用应该向下滚动到该区块。

我当前的代码有效，但我返回的最高位置是在设置最小高度之前的前一个位置。

如果我不清楚，请随时询问更多细节。感谢

参见jsFiddle：http://jsfiddle.net/7nc9q/5/

使用Javascript：

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

app.controller( 'appController', function( $scope ) {
  //Main login here
});
app.controller( 'routeController', function( $scope, $routeParams ) {
  /* 
    Scroll to element ID
  */
  $scope.scrollTo = function(selector){
    if(jQuery('#' + selector).length == 1){
      console.log(jQuery('#' + selector).position().top);
      jQuery('html, body').animate({
        scrollTop:  jQuery('#' + selector).position().top
      });
    };
  }
  if(typeof $routeParams.page !== 'undefined' && $routeParams.page.length > 0){
    $scope.scrollTo($routeParams.page);
  }
});
app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/home/:page', {
        templateUrl: 'templates/home.html',
        controller: 'routeController'
      }).
      otherwise({
        redirectTo: '/home/'
      });
}]);

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

的index.html：

<!doctype html>
<html ng-app="siteApp" ng-controller="appController">
  <head>
    <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>
    <script src="assets/js/app.js"></script>

    <link rel="stylesheet" type="text/css" href="assets/css/reset.css">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
  </head>
  <body>
    <div class="wrapper">
      <div class="view" ng-view></div>
    </div>
  </body>
</html>

模板/ home.html做为

<div class="page" id="page-17" >
    <div class="page-inner" ng-style="style()" resize></div>
</div>
<div class="page" id="page-18">
    <div class="page-inner" ng-style="style()" resize></div>
</div>
<div class="page" id="page-19">
    <div class="page-inner" ng-style="style()" resize></div>
</div>
<div class="page" id="page-20">
    <div class="page-inner" ng-style="style()" resize></div>
</div>

页面布局示例：

enter image description here

Answer 1

有一个内置属性为angular $ anchorScroll ，请确保包含在您的控制器中

  $scope.anchorScroll = function()
            {
                $location.hash('compose-message');

                $anchorScroll();
            }

了解更多信息，请查看文档：{{3}} $ anchorScroll

唯一的问题是：它首先更新网址然后正常执行所需的操作，使用以下代码来避免它：

  $scope.anchorScroll = function()
                {
    var old = $location.hash();
                    $location.hash('compose-message');
                    $anchorScroll();
                    $location.hash(old);
}

Answer 2

问题似乎是在完全设置min-height之前运行scrollTo函数。调整大小对我来说似乎是一个红色的鲱鱼，因为即使没有任何调整大小，问题也会发生。

要修复它，请运行包含在$ timeout中的scrollTo（甚至只需1ms）。这将强制首先完全应用DOM更新，然后它应该正常工作。也就是说，改变它：

$scope.scrollTo($routeParams.page);

为：

$timeout(function() { $scope.scrollTo($routeParams.page) }, 1);

工作解决方案：http://jsfiddle.net/7nc9q/6/

BTW角度控制器不应该对它们中的DOM或jQuery选择器有任何引用，对DOM的引用只应该在指令中。

AngularJS使用routeParams滚动到ID

2 个答案: