Anchor Hash Handling in AngularJS

Navigating through web pages using anchors has been a common practice, especially for long pages with multiple sections. However, in AngularJS applications, anchor link handling can be problematic.

When clicking on anchor links in AngularJS, the default behavior is to intercept the click and redirect the user to a different page. To address this issue, AngularJS provides a solution.

$anchorScroll()

The $anchorScroll() service in AngularJS is specifically designed to handle anchor hash linking. This service allows you to scroll to an element on the current page based on the hash value in the URL.

To use $anchorScroll(), simply inject it into your controller and call it when necessary. The service takes an optional id parameter that specifies the element to scroll to. If no id is provided, it will scroll to the element with the ID matching the $location.hash().

app.controller('TestCtrl', function($scope, $location, $anchorScroll) {
   $scope.scrollTo = function(id) {
      $location.hash(id);
      $anchorScroll();
   }
});

Test/Foo

Simplified Approach

For an even simpler approach, you can use this modified code:

app.run(function($rootScope, $location, $anchorScroll) {
  //when the route is changed scroll to the proper element.
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    if($location.hash()) $anchorScroll();  
  });
});

Your anchor link would then look like this:

Test/Foo

By leveraging these techniques, you can smoothly handle anchor hash linking in your AngularJS applications, providing a seamless user experience for navigating long pages with multiple sections.