2015-05-30 4 views
5

जो मैं समझता हूं उससे $ anchorScroll yofffset बच्चे तत्व के भीतर असंभव है: "yofset को ठीक से काम करने के लिए, स्क्रॉलिंग दस्तावेज़ की जड़ पर होनी चाहिए और कुछ बच्चे तत्व नहीं होना चाहिए।" https://docs.angularjs.org/api/ng/service/ $ anchorScroll

उदाहरण (एंगुलरजेएस डॉक्स से संशोधित): मैं एक लिंक पर क्लिक करना चाहता हूं और स्क्रॉल करने के ऊपर "बीच" शब्द शामिल करना चाहता हूं।

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 भीतर यह करने के लिए एक अच्छा तरीका है (है वरी वास्तव में कोई jQuery या अतिरिक्त पुस्तकालय) DIV के अंदर "बीच" को स्थानांतरित किए बिना मैं स्क्रॉल कर रहा हूं?

उत्तर

0

आप एंकर टैग का उपयोग क्यों नहीं करते?

<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> 
संबंधित मुद्दे