Bagaimana cara menautkan ke bagian halaman? (hash?)

210

Bagaimana Anda menautkan (dengan <a>) sehingga peramban pergi ke subjudul tertentu pada halaman target dan bukan ke atas?

html xhtml anchor Haroldo
sumber

Jawaban:

275

Jika ada <a name="foo">tag atau tag apa pun dengan id(misalnya, <div id="foo">), maka Anda dapat menambahkan #fooURL. Jika tidak, Anda tidak dapat secara sewenang-wenang menautkan ke bagian halaman.

Ini contoh lengkapnya: <a href="http://example.com/page.html#foo">Jump to #foo on page.html</a>

Menautkan konten pada contoh halaman yang sama: <a href="#foo">Jump to #foo on same page</a>

Daniel DiPaolo
sumber
60
Hanya sebuah catatan: Dalam HTML5 tidak ada name-attribute untuk <a>-elements lagi: Nama Atribut pada elemen adalah usang. Pertimbangkan untuk menempatkan atribut id pada wadah terdekat.
masukkan nama pengguna di sini
jadi apakah Anda menggunakan contoh lengkap atau contoh halaman yang sama? bukankah contoh lengkapnya sama?
akantoword
2
jika kita memiliki halaman yang tenang dengan url seperti: domain.com/#home?page=1bagaimana cara menggunakan id di href?
iraj jelodari
1
@irajjelodari Anda akan menempatkan hash di akhir:domain.com/?page=1#home
tomsmeding
saya harus menggunakan 2 hashtags di url seperti: example.com/#RouteName?page=1#ID. satu untuk perutean dan satu untuk navigasi di dalam halaman saat ini. akhirnya saya menggunakan mode html5 URL untuk menghapus tagar rute;) @tomsmeding
iraj jelodari
41

Anda menggunakan jangkar dan hash. Sebagai contoh:

Target Tautan:

 <a name="name_of_target">Content</a>

Tautan ke Target:

 <a href="#name_of_target">Link Text</a>

Atau, jika menautkan dari halaman lain:

 <a href="http://path/to/page/#name_of_target">Link Text</a>
Michael Aaron Safyan
sumber
8
Broser juga akan melompat ke elemen apa pun dengan id name_of_target. Anda tidak perlu menggunakan <a>tag sebagai target. Jadi target lain bisa jadi <h3 id='name_of_target'>Content</h3>.
Cyrille
8
Perhatikan ini sekarang sudah usang dalam HTML5.
Tim
33

Cukup tambahkan hash dengan ID elemen ke URL. Misalnya

<div id="about"></div>

dan

http://mysite.com/#about

Jadi tautannya akan terlihat seperti:

<a href="http://mysite.com/#about">About</a>

atau hanya

<a href="#about">About</a>
Felix Kling
sumber
21

Begini caranya:

<a href="#go_middle">Go Middle</a>

<div id="go_middle">Hello There</div>
Sarfraz
sumber
2
Kamu apa Anda mendapatkan penutupan </a>setelah pembukaan <div ...>- tidak begitu yakin apa yang Anda coba lakukan di sini.
Dominic Rodger
1
saya menyalin garis tautan saya dan menempel di bawah dan lupa menutup div. Terima kasih.
Sarfraz
10

Anda memiliki dua opsi:

Anda bisa menaruh jangkar di dokumen Anda sebagai berikut:

<a name="ref"></a>

Atau Anda memberikan id ke elemen HTML apa pun:

<h1 id="ref">Heading</h1>

Kemudian cukup tambahkan hash #refke URL tautan Anda untuk melompat ke referensi yang diinginkan. Contoh:

<a href="document.html#ref">Jump to ref in document.html</a>
Daniel Vassallo
sumber
6

Pada 12 Maret 2020, sebuah konsep telah ditambahkan oleh WICG untuk Fragmen Teks , dan sekarang Anda dapat menautkan ke teks pada halaman seolah-olah Anda sedang mencarinya dengan menambahkan berikut ini ke hash

#:~:text=<Text To Link to>

Contoh kerja Chrome Version 81.0.4044.138 :

Klik tautan ini. Harus memuat ulang halaman dan sorot teks tautan

Abderrahmane TAHRI JOUTI
sumber