fix(backtotop): redirection avec les ancres

CHANGELOG.md

@@ -14,6 +14,7 @@
 - feat(tab): ajout de la propriété `disabled`
 - feat(table): nouveau composant de tableau avec pagination, sélection et tri
 - feat(toggle): ajout des messages d'erreur et de validation
+- fix(backtotop): l'ancrage fonctionne correctement
 - fix(card/tile): `linkTarget` n'est pas utilisé dans le téléchargement
 - fix(content): structure html modifiée pour respecter le DSFR
 - fix(footer): changement d'ordres des liens institutionnels & ajout de l'attribut `title`

projects/ngx-dsfr-components/src/lib/components/backtotop/backtotop.component.html

-<a class="fr-link fr-icon-arrow-up-fill fr-link--icon-left" href="#top">
-  {{ i18n.t('backtotop.topOfPage') }}
-</a>
+<dsfr-link
+  class="fr-link fr-icon-arrow-up-fill fr-link--icon-left"
+  routerLink="./"
+  [routerLinkExtras]="{ fragment: 'top' }"
+  >{{ backToTopLabel }}</dsfr-link
+>

projects/ngx-dsfr-components/src/lib/components/backtotop/backtotop.component.ts

@@ -7,5 +7,8 @@ import { I18nService } from '../../shared';
   encapsulation: ViewEncapsulation.None,
 })
 export class DsfrBackToTopComponent {
-  constructor(/** @internal */ public i18n: I18nService) {}
+  /** @internal */
+  backToTopLabel = this.i18n.t('backtotop.topOfPage');
+
+  constructor(private i18n: I18nService) {}
 }

projects/ngx-dsfr-components/src/lib/components/backtotop/backtotop.mdx

@@ -13,6 +13,13 @@ Dans les pages de contenu longues, il est possible de proposer un bouton de reto
 - _Composant_ : `DsfrBackToTopComponent`
 - _Tag_ : `dsfr-backtotop`
 
+## Fonctionnement
+
+Le lien de retour en haut de page nécessite deux éléments pour fonctionner :
+
+- Un élément html portant un `id` de valeur `top` (ex: `<h1 id="top">Mon titre</h1>`).
+- L'activation du paramètre `anchorScrolling` dans les options du router Angular.
+
 ## Aperçu
 
 <Canvas of={Stories.Default} />

projects/ngx-dsfr-components/src/lib/components/backtotop/backtotop.module.ts

 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { DsfrLinkModule } from '../link';
 import { DsfrBackToTopComponent } from './backtotop.component';
 
 @NgModule({
   declarations: [DsfrBackToTopComponent],
   exports: [DsfrBackToTopComponent],
-  imports: [CommonModule],
+  imports: [CommonModule, DsfrLinkModule],
 })
 export class DsfrBackToTopModule {}

projects/ngx-dsfr-components/src/lib/components/backtotop/backtotop.stories.ts

+import { RouterTestingModule } from '@angular/router/testing';
 import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { DsfrLinkModule } from '../link';
 import { DsfrBackToTopComponent } from './backtotop.component';
 
 const meta: Meta = {
   title: 'COMPONENTS/Back to Top',
   component: DsfrBackToTopComponent,
-  decorators: [moduleMetadata({ imports: [] })],
+  decorators: [moduleMetadata({ imports: [DsfrLinkModule, RouterTestingModule] })],
 };
 export default meta;
 type Story = StoryObj<DsfrBackToTopComponent>;