Bagikan tautan ke tengah halaman dan tajuk tempel, jika ada, berada di atas tajuk yang Anda inginkan. Browser menggulir ke tepi atas; tajuk Anda dipindahkan nanti. Kedua bagian perbaikan adalah CSS murni.

/* breathe below sticky headers when anchors are hit */
[id] { scroll-margin-top: 6rem; }

/* same for hash-targeted elements, plus free feedback */
:target { scroll-margin-top: 6rem; }
h2:target {
  background: color-mix(in oklab, var(--brand) 12%, white);
  border-radius: 0.35rem;
}

Perbedaan kedua bagian tersebut

  • scroll-margin-top menciptakan spasi di mana operasi scroll-to-anchor mendarat, termasuk penanda tautan dan lompatan fokus untuk membentuk kesalahan.
  • Kelas semu :target cocok dengan elemen yang dialamatkan oleh fragmen URL, yang menjadikannya sorotan dan pengait yang tetap terlihat untuk bagian yang diinginkan pengguna.
  • Keduanya berfungsi ketika JavaScript dinonaktifkan, yang merupakan standar kasus deep-linking di setiap situs statis.

Atur di mana tautan masuk

  1. Deteksi offset yang jujur: gulir ke jangkar di browser sebenarnya dan ukur seberapa jauh header tumpang tindih; gunakan angka itu, bukan tebakan bulat.
  2. Berikan setiap judul sebuah id di markup; menghasilkan id judul dari jumlah build Anda, tetapi id tersebut harus ada agar margin menjadi penting.
  3. Tambahkan sorotan target sebagai latar belakang terang dan tidak permanen yang tidak melawan mode gelap.
  4. Periksa kedua perilaku tersebut di browser dengan navigasi hash dan pratinjau cetak, di mana penyorotan target tidak boleh bocor ke kertas.

Tautan dalam adalah artefak yang paling banyak dibagikan yang dihasilkan konten Anda, dan bagian paling gacor dari perbaikan ini adalah Anda tidak menulis skrip apa pun dan masih terlihat seperti ada.