Geek Answers Handbook

AngularJS $ anchorScroll yOffset in child

From what I understand, $ anchorScroll yOffset is not possible in a child: "For yOffset to work correctly, scrolling must be done at the root of the document, and not at any child." https://docs.angularjs.org/api/ng/service/ $ anchorScroll

Example (modified from AngularJS docs): I want to click a link and include the word “between” over what scrolls.

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

Is there a good way to do this in AngularJS (preferably no jQuery or additional libraries) without moving “between” and inside the DIV I scroll to?

+5
source share
1 answer

Why aren't you using the anchor 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>
0
source

More articles:


All Articles