AngularJS $ anchorScroll yOffset innerhalb eines Kindelements

Von was ich verstehe $ anchorScroll yOffset ist in einem untergeordneten Element unmöglich: "Damit yOffset ordnungsgemäß funktioniert, sollte das Scrollen auf dem Stamm des Dokuments und nicht auf einem untergeordneten Element stattfinden." https://docs.angularjs.org/api/ng/service/ $ anchorScroll

Beispiel (modifiziert aus den AngularJS docs): Ich möchte einen Link klicken, und das Wort „zwischen“ über das, was Spirale ist zu.

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

Gibt es eine gute Möglichkeit, dies innerhalb AngularJS zu tun (Präf (keine jQuery oder zusätzliche Bibliotheken) ohne "dazwischen" in das DIV zu bewegen, zu dem ich gescrollt habe?

Quelle

2015-05-30 Sean

Warum verwenden Sie kein Anker-Tag?

<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>

Quelle

2017-03-24 15:08:52 Alec

AngularJS $ anchorScroll yOffset innerhalb eines Kindelements

Antwort

Verwandte Themen