Ligações para secções e identificadores de fragmentos

O que é um identificador de fragmento?

https://example.com/page#section-3
                          │
                          └─ Fragment: "section-3"

<!-- The browser: -->
<!-- 1. Loads the page -->
<!-- 2. Scrolls to the element with id="section-3" -->

Criando destinos de âncora com id

<!-- The target: give any element an id -->
<h2 id="installation">Installation</h2>
<h2 id="configuration">Configuration</h2>
<h2 id="faq">Frequently Asked Questions</h2>

<!-- The link: use # + id value -->
<a href="#installation">Jump to Installation</a>
<a href="#faq">Go to FAQ</a>

Criando um link a partir de outra página

<!-- From a different page -->
<a href="/docs/guide#installation">Installation Guide</a>
<!-- Loads /docs/guide and scrolls to #installation -->

<!-- Absolute URL to a section -->
<a href="https://example.com/docs#api">API Documentation</a>

Regras de nomenclatura de id

Padrão de sumário

<nav aria-label="Table of Contents">
  <ol>
    <li><a href="#intro">Introduction</a></li>
    <li><a href="#setup">Setup</a></li>
    <li><a href="#usage">Usage</a></li>
    <li><a href="#api">API Reference</a></li>
  </ol>
</nav>

<h2 id="intro">Introduction</h2>
<h2 id="setup">Setup</h2>

Rolagem suave com CSS

/* Apply to the entire page */
html {
  scroll-behavior: smooth;
}

/* Or for specific containers */
.scrollable {
  scroll-behavior: smooth;
}

Espaçamento de rolagem para cabeçalhos fixos

/* If you have a 60px fixed header */
:target {
  scroll-margin-top: 70px;
}

/* Or set globally for all headings */
h2, h3, h4 {
  scroll-margin-top: 70px;
}
/* scroll-margin-top offsets where the browser scrolls to */

A pseudoclasse CSS :target

/* Highlight the targeted section */
:target {
  background-color: #fff3cd;
  outline: 2px solid #ffc107;
  padding: 1rem;
}

<!-- Result: when user clicks #installation, -->
<!-- the installation section gets highlighted -->

Link para voltar ao topo

<a href="#top" id="back-to-top">↑ Back to top</a>
<!-- Link to page top: either id="top" on body or use empty href # -->
<!-- Always give it meaningful text for accessibility -->

<!-- Position it fixed with CSS: -->
<!--
#back-to-top {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
}
-->

Fragmentos e histórico do navegador

Âncoras nomeadas (legado)

<!-- Old way (do not use): -->
<a name="section-1"></a>
<h2>Section 1</h2>

<!-- Modern way: -->
<h2 id="section-1">Section 1</h2>
<!-- Use id on the target element, not a separate anchor tag -->

Verificação rápida

Recapitulação: identificadores de fragmento