Scroll vers les sections d'une page (Angular 19)

Je travaille sur un projet Angular, et dans ma page d'accueil j'ai plusieurs sections.

Le problème c'est que quand je clique sur un lien comme <a href="#features">, l'URL change mais la page ne scroll pas jusqu'à la section...

Je vous propose dans cet article la solution qui a fonctionné pour moi

Avant de commencer, précisons que j'utilise Angular 19 pour ce projet

Préparer notre section cible.

J'ai ajouté un id bien spécifique à la section fonctionnalités

Créer la navigation vers notre section

Pour créer la navigation vers notre section, j'utilise le Router d'Angular avec deux attributs clés :

• routerLink pour cibler la page (ici '/home', c’est ma page d’accueil)

• fragment pour spécifier l'ancre cible

Activation du Scroll vers les Fragments

Pour que le scrolling automatique fonctionne, voici le code à ajouter dans votre composant TypeScript :