Manipulação de hash de âncora em AngularJS

Navegar por páginas da web usando âncoras tem sido uma prática comum, especialmente para páginas longas com múltiplas seções. No entanto, em aplicativos AngularJS, o manuseio do link âncora pode ser problemático.

Ao clicar em links âncora no AngularJS, o comportamento padrão é interceptar o clique e redirecionar o usuário para uma página diferente. Para resolver esse problema, o AngularJS fornece uma solução.

$anchorScroll()

O serviço $anchorScroll() no AngularJS é projetado especificamente para lidar com links de hash de âncora. Este serviço permite que você role até um elemento na página atual com base no valor de hash na URL.

Para usar $anchorScroll(), simplesmente injete-o em seu controlador e chame-o quando necessário. O serviço utiliza um parâmetro id opcional que especifica o elemento para o qual rolar. Se nenhum ID for fornecido, ele irá rolar para o elemento com o ID correspondente a $location.hash().

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

Test/Foo

Abordagem Simplificada

Para uma abordagem ainda mais simples, você pode usar este modificado código:

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();  
  });
});

Seu link âncora ficaria assim:

Test/Foo

Ao aproveitar essas técnicas, você pode lidar facilmente com links de hash de âncora em seus aplicativos AngularJS, proporcionando uma experiência de usuário perfeita para navegar em páginas longas com múltiplas seções.