Anchor

El índice de la página, que sigue el desplazamiento y marca la sección en la que se encuentra la persona.

En esta página

Playground

Parte actual

Fondo

HTML

<nav class="feitio-anchor" aria-label="Ejemplo de índice"><p class="title">En esta página</p><ul><li><a href="#playground" aria-current="location"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg>Cuándo usarlo</a></li><li><a href="#playground"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg>Ejemplos</a></li><li><a href="#playground"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg>Accesibilidad</a></li></ul></nav>

Cuándo usarlo

En páginas largas con varias secciones: documentación, una guía, un política.

Cuándo no usarlo

Páginas cortas, con una o dos secciones: la página ya encaja en el ojo.
Para moverse entre páginas: Navegación.

Ejemplos

El índice

Los encabezados de la página (h2, y h3 debajo de ellos). La sección actual está en tinta y negrita, con la flecha dibujada a mano delante. Esta página tiene su propia barra, a la derecha en pantallas anchas.

Mostrar código

HTML

<nav class="feitio-anchor" aria-label="Nesta página">
  <p class="title">Nesta página</p>
  <ul>
    <li><a href="#quando">…Quando usar</a></li>
    <li><a href="#exemplos" aria-current="location">…Exemplos</a>
      <ul><li><a href="#ex-mobile">…No mobile</a></li></ul>
    </li>
  </ul>
</nav>

On this page

En móvil

El mismo índice va en un "Detalles de esta página" cerrado en la parte superior del contenido. Tocar una sección hace que se desplace hacia ella y cierre la lista.

Mostrar código

HTML

<details class="toc-mobile">
  <summary>…Nesta página</summary>
  <nav class="feitio-anchor">…</nav>
</details>

Anatomía

Título: "Detalles de esta página".
Sección: un enlace por h2, en tinta suave.
Sección actual: tinta, negrita y la flecha a mano alzada. Sin franja lateral.
Subsección: los h3s, un paso más adentro.

Estados

Desplazamiento: la sección marcada cambia a lo largo, con la transición; al final de la página, la última permanece marcada.
Tocar en una sección: la página se desplaza suavemente hacia ella, y la dirección sigue.
Índice más alto que la pantalla: se desplaza por sí mismo, con ScrollFade.

Hacer y no hacer

La sección actual con tinta, negrita y la flecha.

Don’t

La franja lateral naranja: el sello de cada sitio de documentación genérico.

Un <nav> con nombre; la sección actual con aria-current="location".
Al pulsar, el foco va a la cabecera de la sección.

Atributos

Atributo	Valores	Para qué sirve
`class="feitio-anchor"`	en el `<nav>`	La lista de secciones, con la actual marcada.
`aria-current="location"`	en la sección actual	Tinta, negrita y la flecha; establecidos por el script.
`id`	en cada `h2` y `h3`	Sin un `id`, el encabezado queda fuera del índice.