Manejo de Anchor Hash en AngularJS

Navegar a través de páginas web usando anclajes ha sido una práctica común, especialmente para páginas largas con múltiples secciones. Sin embargo, en las aplicaciones AngularJS, el manejo de enlaces ancla puede ser problemático.

Al hacer clic en enlaces ancla en AngularJS, el comportamiento predeterminado es interceptar el clic y redirigir al usuario a una página diferente. Para abordar este problema, AngularJS proporciona una solución.

$anchorScroll()

El servicio $anchorScroll() en AngularJS está diseñado específicamente para manejar enlaces hash de anclaje. Este servicio le permite desplazarse a un elemento en la página actual según el valor hash en la URL.

Para usar $anchorScroll(), simplemente inyéctelo en su controlador y llámelo cuando sea necesario. El servicio toma un parámetro de identificación opcional que especifica el elemento al que desplazarse. Si no se proporciona ninguna identificación, se desplazará hasta el elemento con la identificación que coincida con $location.hash().

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

Test/Foo

Enfoque simplificado

Para un enfoque aún más simple, puede usar este código modificado:

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

Su enlace de anclaje se vería así:

Test/Foo

Al aprovechar estas técnicas, puede manejar sin problemas los enlaces hash de anclaje en sus aplicaciones AngularJS, proporcionando una experiencia de usuario perfecta para navegar por páginas largas con múltiples secciones.