Tautan jangkar dan cara menjadikannya luar biasa / Blok Pembuat Kode – Beragampengetahuan

Tautan jangkar (juga disebut tautan lompat) adalah cara sederhana untuk menyediakan navigasi pada halaman. Misalnya, daftar isi dapat menggunakan link jangkar untuk mengarahkan pembaca langsung ke berbagai bagian halaman.

Mereka sangat mudah diatur, tetapi dengan menambahkan sedikit CSS di atasnya Anda benar-benar dapat membuatnya berkilau. Mari kita mulai dengan dasar-dasarnya dan membangun dari sana.

Untuk membuat jangkar halaman, berikan elemen a id. Itu saja. Anda dapat menggunakan berbagai elemen sebagai jangkar halaman, meskipun penggunaan judul adalah hal yang umum.

<h1 id="my-anchor">Page anchor</h1>

Sekarang Anda dapat menautkan ke halaman jangkar menggunakan # Dan id sebagai href.

<a href="#my-anchor">Jump to the page anchor</a>

Ada dua nilai khusus yang dapat digunakan sebagai href Tautan jangkar: #top atau sederhananya #. Semuanya melakukan hal yang sama, membawa Anda ke bagian paling atas halaman. Tidak perlu membuat jangkar halaman untuk ini.

Mari kita lihat cara kerja tautan jangkar ini.

DemoTautan jangkar: dasar

Perhatikan bagaimana mengklik tautan jangkar di demo menambahkan hash (mis. #my-anchor) ke URL halaman di bilah alamat — ini dapat disalin dan digunakan untuk menautkan langsung ke jangkar halaman, seperti yang ditunjukkan di bawah ini.

Sekarang mari kita lihat apa yang bisa dilakukan dengan menambahkan sedikit CSS.

Pada demo sebelumnya, melompat ke halaman jangkar dilakukan secara instan, yang dapat sedikit membingungkan. Untungnya, kita dapat mencapai pengguliran yang mulus hanya dengan menggunakan CSS.

html {
  scroll-behavior: smooth;
}

Sekarang coba lagi tautan jangkar ini.

DemoTautan jangkar: halus

Sejauh ini, tautan jangkar kami telah menggulirkan jangkar halaman ke tepi atas area pandang. Bukankah menyenangkan jika ada sedikit ruang bernapas di sana? Kita dapat mencapainya dengan menetapkan scroll-margin-top di jangkar halaman.

h1 {
  scroll-margin-top: 40px;
}

ini akan pergi 40px Jarak antara bagian atas area pandang dan jangkar halaman. memeriksanya.

DemoTautan jangkar: halus + margin

Trik ini berguna ketika Anda memiliki header yang lengket untuk mendorong jangkar halaman sedikit ke bawah sehingga jangkar halaman tidak berada di belakangnya.

Anda dapat menggunakan CSS :target Kelas semu digunakan untuk menambahkan gaya ke jangkar halaman saat melompat ke sana.

h1:target {
  color: #71a819; 
}

Dalam demo ini, mengklik Lompat ke Jangkar Halaman akan mengaktifkan CSS di atas, membuat teks jangkar halaman menjadi hijau. Mengklik “Lompat kembali ke atas” akan menghasilkan <h1> tidak lagi menjadi target, sehingga teks tidak lagi berwarna hijau.

DemoTautan jangkar: halus+margin+gaya

Kita bisa melakukan hal-hal yang lebih kompleks :target Lebih dari sekedar mengubah warna teks. Berikut adalah demo yang menyorot area konten dan menganimasikan link “kembali ke atas”.

DemoTautan jangkar: gaya yang lebih canggih

Di bawah ini adalah HTML (disingkat) yang menunjukkan cara mengaturnya.

<nav>
  <a href="#kiwis">Kiwis</a>
  <a href="#limes">Limes</a>
  <a href="#pears">Pears</a>
</nav>

<article>
  <h1 id="kiwis">Kiwis</h1>
  <p></p>
</article>



<a class="back-to-top" href="#top">Back to top</a>

Penyorotan artikel diselesaikan melalui CSS ini.

article {
  border: 3px solid transparent;
}


article:has(h1:target) {
  border-color: #71a819;
}

Berikut adalah CSS untuk menampilkan/menyembunyikan link “kembali ke atas”.

.back-to-top {
  
  position: fixed;
  top: 10px;
  right: 10px;

  
  opacity: 0;
  translate: calc(100% + 10px);

  
  transition: all 0.5s;
}


body:has(h1:target) .back-to-top {
  opacity: 1;
  translate: 0px;
}

Semua contoh sejauh ini memiliki wadah gulir: halaman itu sendiri. Namun, dimungkinkan untuk memiliki wadah yang dapat digulir bertingkat – misalnya, wadah yang dapat digulir <div> di halaman. Jika Anda menempatkan jangkar halaman ke dalam wadah gulir yang disarangkan, tautan jangkar yang menunjuk ke sana akan menggulir semua wadah yang diperlukan agar target terlihat. Rapi!

Ini adalah demo. Perhatikan bahwa posisi gulir terasa sedikit melenceng — scroll-margin Belum ditambahkan. Kami akan membahas alasannya selanjutnya.

DemoTautan jangkar gulir bersarang: tanpa bantalan

Sekarang mari kita perbaiki posisi gulir ini. kami telah menggunakan scroll-margin-top Ini dulunya terjadi, tetapi di Chrome dan Edge, ini tidak berfungsi di sini. Margin gulir tidak melampaui wadah gulir yang disarangkan.

Untungnya, ada cara lain untuk mengatasi masalah ini. alih-alih scroll-marginkita bisa menggunakan scroll-padding. Keduanya memberikan hasil yang serupa, namun perbedaannya adalah:

• scroll-margin Digunakan untuk jangkar halaman.
• scroll-padding Digunakan untuk menggulung kontainer.

Mari perbarui demo dengan beberapa konten scroll-padding.

html {
  scroll-padding-top: 130px;
}

.slide-container {
  scroll-padding-inline: 20px;
}

Ini menambahkan beberapa bantalan gulir atas yang besar ke halaman sehingga tombol tetap terlihat. Itu juga menambahkan beberapa padding gulir sebaris (kiri dan kanan) ke item yang dapat digulir <div> Jadi setiap slide berada di tengah wadah gulir dengan baik.

DemoTautan jangkar gulir bersarang: dengan bantalan

Anda juga dapat menggunakan JavaScript untuk menggulir ke halaman jangkar dengan menelepon scrollIntoView(). Secara sederhana, tampilannya seperti ini.

const anchor = document.getElementById('my-anchor');
anchor.scrollIntoView();

Faktanya, Anda bahkan tidak perlu memilikinya id di atasnya. Anda dapat menggunakan scrollIntoView() Gulir ke elemen mana pun.

const element = document.querySelector('.whatever');
element.scrollIntoView();

Apa pun kasusnya, penggulirannya akan sama seperti yang telah kita lihat sejauh ini, dengan beberapa peringatan.

1. URL halaman di bilah alamat tidak diperbarui dengan nilai hash.
2. Elemen yang di-scroll tidak dianggap sebagai elemen target, jadi CSS :target Kelas semu tidak berfungsi.
3. Di Chrome, Firefox dan Edge, kapan scrollIntoView() Digunakan di dalam iframe, itu bisa “pecah” dan juga mempengaruhi posisi gulir halaman induk.

Jika ini sulit bagi Anda dan Anda benar-benar perlu menggunakan JavaScript, ada solusinya.

window.location.assign('#my-anchor');

Ini akan berperilaku seperti tautan jangkar #my-anchor diklik.

mari kita bicara lebih banyak scrollIntoView(). Anda dapat menyempurnakan cara menggulirnya dengan menyediakan parameter objek (opsional). Seperti inilah nilai defaultnya.

element.scrollIntoView({
  behavior: 'auto',
  block: 'start',
  inline: 'nearest'
});

ini behavior Properti menentukan apakah pengguliran itu instan atau lancar.

• 'auto' – nilai yang digunakan scroll-behavior di CSS.
• 'instant' – Langsung ke elemen.
• 'smooth' – Pengguliran halus ke elemen.

ini block Properti menentukan perataan gulir vertikal.

• 'start' – Gulir bagian atas elemen ke bagian atas wadah gulir.
• 'center' – Gulir bagian tengah elemen ke tengah wadah gulir.
• 'end' – Gulir bagian bawah elemen ke bagian bawah wadah gulir.
• 'nearest' – Gulir secukupnya sehingga elemen terlihat sepenuhnya di dalam wadah gulir – atau jika elemen lebih tinggi dari wadah gulir, gulir secukupnya agar elemen memenuhi wadah gulir. Jika elemen sudah berada di dalam wadah gulir atau memenuhi wadah gulir sepenuhnya, tidak ada yang terjadi.

ini inline Properti memiliki logika serupa tetapi digunakan untuk perataan gulir horizontal.

• 'start' – Gulir sisi kiri elemen ke sisi kiri wadah gulir.
• 'center' – Gulir bagian tengah elemen ke tengah wadah gulir.
• 'end' – Gulir sisi kanan elemen ke sisi kanan wadah gulir.
• 'nearest' – Gulir secukupnya sehingga elemen terlihat sepenuhnya di dalam wadah gulir – atau jika elemen lebih lebar dari wadah gulir, gulir secukupnya agar elemen memenuhi wadah gulir. Jika elemen sudah berada di dalam wadah gulir atau memenuhi wadah gulir sepenuhnya, tidak ada yang terjadi.

Dalam beberapa kasus, perataan gulir yang Anda perlukan mungkin tidak dapat dicapai – biasanya ketika elemen berada di tepi wadah gulir dan tidak ada cukup ruang gulir untuk mencapainya. Browser Anda akan tetap menggulir sebanyak mungkin.

Oke, cukup kata. Mungkin lebih mudah untuk melihatnya sendiri, jadi inilah taman bermain untuk mengujinya.

DemoScrollIntoView() Taman Bermain

Saya akan mengakhiri dengan beberapa catatan teknis saat saya menulis artikel ini. Saya harus menghadapi beberapa hal aneh yang ingin saya bagikan kepada Anda semua.

Saya biasanya menyematkan demo Codepen langsung ke artikel saya, menggunakan <iframe>. Seperti yang Anda lihat, saya tidak melakukannya kali ini karena dua alasan.

1. Tautan jangkar yang diklik dihitung sebagai navigasi dan masuk ke dalam riwayat browser. Meskipun tautan ini berada <iframe>. Jadi jika Anda mengklik beberapa link jangkar di demo yang tertanam dan kemudian mencoba menekan tombol kembali di browser Anda, Anda akan tetap berada di halaman blog ini.
2. Ini telah disebutkan secara singkat sebelumnya, tetapi menggunakan scrollIntoView() di sebuah <iframe> Akan mempengaruhi posisi gulir halaman induk. Tidak ada opsi kotak pasir untuk mengatasi masalah ini. Terutama demo “taman bermain” terakhir, sangat aneh menggunakan demo sebaris dan membuat seluruh halaman berpindah. Dalam pengujian saya, Safari adalah satu-satunya browser yang tidak melakukan hal ini.

Poin lainnya, ketika saya sedang meneliti scroll-margin Dan scroll-paddingSaya melihat banyak sumber yang membingungkan hanya berbicara tentang relevansinya dengan penangkapan gulir, sampai-sampai saya bertanya-tanya apakah menggunakannya untuk jangkar halaman adalah peretasan yang tidak disengaja. Hal ini tidak terjadi, karena saya menemukan bahwa spesifikasi scroll-capture CSS itu sendiri telah dimodifikasi untuk secara khusus mengatasi kebingungan ini.