Ads by Yasya El Hakim
Mengatur Offset atau Jarak Anchor Tag Link pada CSS

Jika kalian memiliki Blog/Website yang memiliki Fixed atau Sticky Header, mungkin kalian akan memiliki masalah tentang Anchor Tag Link atau Link Table of Content (ToC) yang tidak bekerja dengan sempurna.

Ketika pengguna atau user menggunakan Anchor Link untuk mengarahkan ke lokasi Anchor, maka Judul tersebut akan tertutup atau berada di belakang header.

Berikut adalah contohnya:

Anchor Link Tertutup Header

Jika pengguna atau pengunjung mengelik salah satu link yang ada di dalam daftar isi, maka judul nya akan tertutup dengan Fixed atau Sticky Header.

Untuk mengatasinya, kalian dapat menggunakan bantuan CSS saja. Ya, hanya dengan CSS! Karena metode ini tidaklah membutuhkan bantuan atau sentuhan dari JavaScript.

Berikut adalah kode CSS nya:

:target:before {
    content: "";
    display: block;
    height: 60px; /* tinggi dari Fixed atau Sticky Header */
    margin: -60px 0 0; /* nilai negatif dari tinggi Fixed atau Sticky Header */
}


Keterangan:
60px adalah tinggi dari Fixed atau Sticky Header ditambah margin dan padding. Disini, kalian harus mengatur nilainya sesuai dengan tinggi dari fixed atau sticky header yang ada pada blog atau Website kalian.

Contoh: Jika fixed header yang kalian gunakan itu memiliki tinggi 90px, maka kalian harus mengatur nilai dari property height menjadi 90px (height: 90px;), serta margin menjadi -90px 0 0 (margin: -60px 0 0;).

Sebelum menggunakan kode CSS diatas:

Sebelum menggunakan kode CSS diatas

Setelah menggunakan kode CSS diatas:

Setelah menggunakan kode CSS diatas

Nah, sudah berhasil dan mudah bukan? Itulah cara singkat untuk mengatasi Link Table of Content (Toc) atau Anchor Link yang tertutup oleh Fixed atau Sticky Header.

Artikel ini adalah salah satu jawaban dari pertanyaan yang saya dapatkan, jadi mohon maaf kalau kurang jelas atau terlalu singkat. Maka dari itu, jika kalian bingung, kalian dapat menuliskan pertanyaan pada kolom komentar dibawah ini. Terimakasih.

0Komentar

Sebelumnya Selanjutnya