Link înapoi sus

Prezentare

Oferă o cale reală, printr-o ancoră HTML, de revenire la începutul unei pagini lungi.

Când se folosește

• la finalul conținutului lung, unde derularea manuală înapoi ar fi incomodă.

Când nu se folosește

• pe pagini scurte, unde revenirea sus nu aduce niciun beneficiu real.

Anatomie

Un `<a class="sd-back-to-top" href="#catalog-top">` cu `__icon` decorativ, rotit prin CSS.

Variante

• implicit — o singură variantă

Stări

• implicit
• :hover (subliniere text)

Comportament

Link real cu `href="#id"` — funcționează identic fără CSS sau JavaScript, doar fără rotația iconiței decorative. Dispare la tipărire (`display: none` în `@media print`).

Reguli de conținut

• textul spune „Înapoi sus", nu doar o săgeată fără text alternativ.

Responsabilitățile implementatorului

• `href`-ul trebuie să indice un `id` real, existent pe pagină, nu doar `#top` generic fără element țintă.

Cercetare

• https://github.com/ciprian-rus/sistem.digital/pull/89 (site extern)

Istoric

Structura completă a acestei secțiuni urmează șablonul canonic al paginii unei componente. Accesibilitatea (semantică, tastatură, focus) rămâne documentată separat, conform șablonului de accesibilitate.

Preview și markup canonic

Previzualizarea de mai jos redă exact șirul HTML afișat în exemplul de cod. Nu există o implementare paralelă pentru documentație.

Instalare și importuri

pnpm add @sistem-digital/tokens @sistem-digital/components

@import '@sistem-digital/components/navigation.css';

<a class="sd-back-to-top" href="#catalog-top"><span class="sd-back-to-top__icon" aria-hidden="true">→</span>Înapoi sus</a>

Contract și surse

• Documentația familiei Navigație
• Codul sursă (site extern)
• Changelog (site extern)

Schimbarea claselor publice, a markup-ului canonic sau a comportamentului helperelor necesită versionare și instrucțiuni de migrare.

Matricea design–cod

Disponibilitatea reală a acestei componente, calculată din pachetele publicate, conform schemei matricei design–cod. Rândurile Figma, testare cu tastatura și testare cu cititor de ecran rămân „Indisponibil” până la dovezi publicate separat (kit Figma, respectiv auditul manual de accesibilitate).