Webページが角で固定されていない

Question

私はページをクリックしたときのページのdivセクションに移動しようとしています。私は適切なタグで各セクションのIDを持つdivを持っています。私はページをロードしてurl.com/services#insertidhereと入力すれば、正しい場所に移動します。問題は、私がその場所に行かない状態で実装しようとするときです。表示されたURLが正しいにもかかわらず、ページに正常に移動します。

HTMLインデックススニペット

<div ng-repeat="x in blue.services"> 
    <div class="wrapIMG"> 
     <img src="{{x.icon}}" /> 
     <img class="clone" src="{{x.icon}}" /> 
    </div> 
    <h4>{{x.title}}</h4> 
    <hr/> 
    <p>{{x.text}}</p> 
    <a ui-sref="services({id: x.title})" class="button2">About This</a> 
</div> 

myapp.jsは、私は問題がでなければならないと考えてい

app.config(function($stateProvider){ 
    $stateProvider 
     .state('index', { 
      url:"/", 
      templateUrl: 'main.html', 
      data: { 
       cssId: 'home' 
      } 
     }) 
     .state('services', { 
      url: "/services/#:id", 
      templateUrl: 'services.html', 
      data: { 
       cssId: 'services' 
      } 
     }) 
}); 

サービスHTMLスニペット

<section class="no-padding" style="" id="[id equal to x.title]"> ...</section> 
<section class="no-padding" style="" id="[id equal to x.title]"> ...</section> 
<section class="no-padding" style="" id="[id equal to x.title]"> ...</section> 

をスニペットURLがURLに正しく表示されますが、その場所には移動しません。

Answer 1

Angularは、ページルーティングのURLに#を使用します（他の多くのSPAフレームワークも同様です）。

ページ上の特定のIDにリンクを固定するには、$anchorScroll serviceを使用します。

例：

<div id="scrollArea" ng-controller="ScrollController"> 
    <a ng-click="gotoBottom()">Go to bottom</a> 
    <a id="bottom"></a> You're at the bottom! 
</div> 

<script> 
    angular.module('anchorScrollExample', []) 
    .controller('ScrollController', ['$scope', '$location', '$anchorScroll', 
    function($scope, $location, $anchorScroll) { 
     $scope.gotoBottom = function() { 
     // set the location.hash to the id of 
     // the element you wish to scroll to. 
     $location.hash('bottom'); 

     // call $anchorScroll() 
     $anchorScroll(); 
     }; 
    }]); 
</script> 

Answer 2

$scope.toPage = function(){$state.go('index');} 

あなたはこれを試してみましたか？