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

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