AngularJS $anchorScroll yOffset within a child element

All we need is an easy explanation of the problem, so here it is.

From what I understand $anchorScroll yOffset is impossible within a child element:
“In order for yOffset to work properly, scrolling should take place on the document’s root and not some child element.” https://docs.angularjs.org/api/ng/service/$anchorScroll

Example (modified from the the AngularJS docs):
I want to click a link and include the word “between” above what is being scroll to.

index.html

<body ng-app="anchorScrollOffsetExample">
    <div class="fixed-header" ng-controller="headerCtrl">
    <a href="" ng-click=" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener"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 within AngularJS (preferably no jQuery or additional libraries) without moving “between” to inside the DIV I’m scrolling to?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Why don’t you use an anchor tag?

<body ng-app="anchorScrollOffsetExample">
    <div class="fixed-header" ng-controller="headerCtrl">
    <a href="" ng-click=" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener"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>

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply