2015-05-30 7 views
5

: "yOffset belgenin köküne gerçekleşen ve bazı alt öğe olmalıdır kaydırma, düzgün çalışması için ise" https://docs.angularjs.org/api/ng/service/ $ anchorScroll

Örnek (AngularJS belgelerinden değiştirilmiştir): Bir bağlantıya tıklamak ve "arasında" sözcüğünü, kaydırılanın üzerine eklemek istiyorum.

index.html

<body ng-app="anchorScrollOffsetExample"> 
    <div class="fixed-header" ng-controller="headerCtrl"> 
    <a href="" ng-click="gotoAnchor(x)" ng-repeat="x in [1,2,3,4,5]"> 
     Go to inner-anchor {{x}} 
    </a> 
    </div> 
    <div id="anchor" class="anchor"> 
    <div ng-repeat="x in [1,2,3,4,5]"> 
     between 
     <div id="innerAnchor{{x}}" class="anchor" >Inner-Anchor {{x}} of 5</div> 
    </div> 
    </div> 
</body> 

style.css

.anchor { 
    border: 2px dashed DarkOrchid; 
    padding: 10px 10px 200px 10px; 
    max-height:500px; 
    overflow-y: auto; 
    } 

script.js

angular.module('anchorScrollOffsetExample', []) 
.run(['$anchorScroll', function($anchorScroll) { 
    $anchorScroll.yOffset = 500; 
}]) 
.controller('headerCtrl', ['$anchorScroll', '$location', '$scope', 
    function ($anchorScroll, $location, $scope) { 
    $scope.gotoAnchor = function(x) { 
     var newHash = 'anchor' + x; 
     if ($location.hash() !== newHash) { 
     $location.hash('innerAnchor' + x); 
     } else { 
     $anchorScroll(); 
     } 
    }; 
    } 
]); 

http://plnkr.co/edit/yFj9fL3sOhDqjhMawI72?p=preview

angularjs içinde yapmanız için iyi bir yoldur (var mı terc DIV içinde "arasinda" hareket etmeden eger jQuery veya ek kütüphaneler olusur).

cevap

0

Neden bağlantı etiketi kullanmıyorsunuz?

<body ng-app="anchorScrollOffsetExample"> 
    <div class="fixed-header" ng-controller="headerCtrl"> 
    <a href="" ng-click="gotoAnchor(x)" ng-repeat="x in [1,2,3,4,5]"> 
     Go to inner-anchor {{x}} 
    </a> 
    </div> 
    <div id="anchor" class="anchor"> 
    <div ng-repeat="x in [1,2,3,4,5]"> 
     <!-- Add an anchor above the text, and we scroll here instead of the div --> 
     <a name="innerAnchor{{x}}"></a> 
     between 
     <div class="anchor" >Inner-Anchor {{x}} of 5</div> 
    </div> 
    </div> 
</body> 
İlgili konular