0

サブページを持つ単一ページのアプリを作成しています。

アイデアは、私はホーム、アバウト、連絡先などのURLを持っているということです。各ページには複数のブロックがあります。

ページが読み込まれると、ブロックには最小の高さが設定されます。最小の高さはウィンドウの高さです。これは動的であるため、サイズを変更すると、最小の高さがリセットされます。

現在、ルートは #/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>

ページ レイアウトの例:

ここに画像の説明を入力

4

2 に答える 2

2

angular $anchorScrollの組み込みプロパティがあり、コントローラーに必ず含めてください

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

                $anchorScroll();
            }

詳細については、ドキュメントを確認してください: https://docs.angularjs.org/api/ng/service/ $anchorScroll

唯一の問題は、最初にURLを更新してから、通常どおり目的のアクションを実行することです.次のコードを使用して回避してください:

  $scope.anchorScroll = function()
                {
    var old = $location.hash();
                    $location.hash('compose-message');
                    $anchorScroll();
                    $location.hash(old);
}
于 2015-09-01T12:18:35.157 に答える