In Angular1.6 $anchorScroll, Offset

Question

Can someone explain to me how to use $anchorScroll, Offset, scrollX, scrollY in Components which is in AngularJS 1.6?

Answer 1

angular.module('anchorScrollExample', [])
.controller('ScrollController', ['$scope', '$location', '$anchorScroll',
  function($scope, $location, $anchorScroll) {
    $scope.gotoBottom = function() {
      // set the location.hash to the id of
      // the element you wish to scroll to.
      $location.hash('bottom');

      // call $anchorScroll()
      $anchorScroll();
    };
  }]);

This is the example given by the official documentation.

It injects the $anchorScroll Services into the controller. The service can be used by simply calling it via $anchorScroll(), once you finished setting the $location hash to the id of your desired position (eg, the element start you want to scroll to).

If you're uncomfortable injecting the $location service into your controller, you may as well just pass the id of the element directly to $anchorScroll('bottom').

In case you have a fixed navigation bar on top of your page (or something along the lines) you want to specify an offset to add to the scroll position (Otherwise the navigation would overlay your element once the scrolling finished). Do so by setting it $anchorScroll.yOffset = 100.

Answer 2

Try AngularJS documentation for it

https://docs.angularjs.org/api/ng/service/$anchorScroll