How to handle anchor hash linking in AngularJS

javascript

scrolling-behavior

angularjs-routing

hash-linking

byNikita Barsukov·Jan 7, 2025

Utilize $anchorScroll in AngularJS to scroll to a specific element that matches the URL hash set by $location.hash(). Here's a quick and dirty demonstration:

app.controller('MyCtrl', function($scope, $anchorScroll, $location) {
  $scope.scrollTo = function(hashId) {
    // Yeah, set that hash like you're in a cryptology club.
    $location.hash(hashId); 
    // Scroll, baby, scroll! It's like a Marquee tag with class.
    $anchorScroll(); 
  };
});

Perform scrolling in your view with ng-click:

<a ng-click="scrollTo('target')">Go to Target</a>
<!-- Welcome to the end of the rainbow! -->
<div id="target">You've arrived!</div>

That's it! Just assign hashId to the element's ID you want to target, and Bob's your uncle!

Controlling scroll behavior with `$routeChangeSuccess`

In the case of navigation dependent on hash changes, it's beneficial to use $rootScope.$on('$routeChangeSuccess') to align scrolling with routing events. This way, unnecessary scrolling can be avoided when the user lands on the page, providing a smoother user experience. Better scrolling reduces the chance of well... scroll rage.

app.run(function($rootScope, $anchorScroll, $location) {
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    // If the hash exists, let 'er rip!
    if ($location.hash()) $anchorScroll();
  });
});

For debugging and live results, consider getting your hands dirty on Plunker.

Advanced scrolling strategies with query parameters

Using query parameters along with URL hashes, we can gain granular control over the scroll behavior. It's not Mission Control, but it's close.

// Using your router's GPS for additional control.
$location.url($location.path() + "?scrollTo=true#" + hashId);

After scrolling completes, reset the hash to prevent issues with routing and unwanted infinite scrolling adventures:

// Clean up after your hash party.
$location.hash('');

Adapting to routing quirks and features

Legacy browser compatibility considerations

For compatibility with older browsers like IE8+, steer clear from html5Mode. Use the double hash (##) technique or other alternatives:

<a href="#/route##anchorId">Take me there, Scotty!</a>
<div id="anchorId">Welcome to the final frontier!</div>

Navigating around routing conflicts

If you're up against routing conflicts, try arranging your anchor tags so they don't lock phasers with routing mechanisms:

<a href="#/yourRoute#yourAnchor">Set a course for adventure!</a>

Here's where the teleport ends:

```html
<div id="yourAnchor">You've landed!</div>

Attaining optimum user experience

To enhance your user's space (or rather, webpage) adventure, aim for a smooth journey by avoiding potential time loops or wormholes (errors and unexpected routing behaviors).

explain-codes / Javascript / How to handle anchor hash linking in AngularJS

Linked

Changing route doesn't scroll to the top in the new page



Anchor jumping by using javascript



How to scroll an HTML page to a given anchor



Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink



In Angular, how do you determine the active route?

