Anker-Hash-Handhabung in AngularJS

Das Navigieren durch Webseiten mithilfe von Ankern ist eine gängige Praxis, insbesondere bei langen Seiten mit mehreren Abschnitten. In AngularJS-Anwendungen kann die Handhabung von Ankerlinks jedoch problematisch sein.

Beim Klicken auf Ankerlinks in AngularJS besteht das Standardverhalten darin, den Klick abzufangen und den Benutzer auf eine andere Seite umzuleiten. Um dieses Problem zu beheben, bietet AngularJS eine Lösung.

$anchorScroll()

Der $anchorScroll()-Dienst in AngularJS wurde speziell für die Verarbeitung von Anker-Hash-Verknüpfungen entwickelt. Mit diesem Dienst können Sie basierend auf dem Hash-Wert in der URL zu einem Element auf der aktuellen Seite scrollen.

Um $anchorScroll() zu verwenden, fügen Sie es einfach in Ihren Controller ein und rufen Sie es bei Bedarf auf. Der Dienst akzeptiert einen optionalen ID-Parameter, der das Element angibt, zu dem gescrollt werden soll. Wenn keine ID angegeben wird, wird zu dem Element gescrollt, dessen ID mit $location.hash() übereinstimmt.

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

Test/Foo

Vereinfachter Ansatz

Für einen noch einfacheren Ansatz können Sie diesen modifizierten Ansatz verwenden 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();  
  });
});

Ihr Ankerlink würde dann so aussehen:

Test/Foo

Durch die Nutzung dieser Techniken können Sie die Anker-Hash-Verknüpfung in Ihren AngularJS-Anwendungen reibungslos handhaben und so eine nahtlose Benutzererfahrung beim Navigieren auf langen Seiten mit mehreren Abschnitten bieten.