Làm cách nào để liên kết đến một phần của trang? (băm?)

210

Làm thế nào để bạn liên kết (với <a>) để trình duyệt đi đến một phân nhóm nhất định trên trang đích chứ không phải đầu trang?

html xhtml anchor

— Haroldo
nguồn

275

Nếu có một <a name="foo">thẻ hoặc bất kỳ thẻ nào có id(ví dụ: <div id="foo">), thì bạn chỉ cần thêm #foovào URL. Nếu không, bạn không thể tùy ý liên kết đến các phần của trang.

Đây là một ví dụ hoàn chỉnh: <a href="http://example.com/page.html#foo">Jump to #foo on page.html</a>

Liên kết nội dung trên cùng một ví dụ trang: <a href="#foo">Jump to #foo on same page</a>

— Daniel DiPaolo
nguồn

60

Chỉ cần lưu ý: Trong HTML5 không còn namephân bổ cho -elements <a>nữa: Thuộc tính name trên thành phần đã lỗi thời. Thay vào đó, hãy xem xét đặt một thuộc tính id trên container gần nhất.

— insertusernamehere

Vì vậy, bạn sử dụng ví dụ đầy đủ hoặc ví dụ cùng một trang? không phải là ví dụ hoàn chỉnh giống nhau sao?

— akantoword

2

nếu chúng tôi có một trang yên tĩnh với url như: domain.com/#home?page=1làm thế nào để sử dụng id trong href?

— iraj jelodari

1

@irajjelodari Bạn sẽ đặt băm ở cuối:domain.com/?page=1#home

— tomsmeding

tôi đã phải sử dụng 2 hashtag trong url như : example.com/#RouteName?page=1#ID. một để định tuyến và một để điều hướng bên trong trang hiện tại. cuối cùng tôi đã sử dụng chế độ URL5 của URL5 để xóa hashtags tuyến đường;) @tomsmeding

— iraj jelodari

41

Bạn sử dụng một neo và một hàm băm. Ví dụ:

Mục tiêu của Liên kết:

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

Liên kết đến mục tiêu:

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

Hoặc, nếu liên kết từ một trang khác:

 <a href="http://path/to/page/#name_of_target">Link Text</a>

— Michael Aaron Safyan
nguồn

8

Broser cũng sẽ nhảy đến bất kỳ phần tử nào có id name_of_target. Bạn không cần sử dụng <a>thẻ làm mục tiêu. Vì vậy, một mục tiêu khác có thể được <h3 id='name_of_target'>Content</h3>.

— Cyrille

8

Lưu ý rằng điều này hiện đã lỗi thời trong HTML5.

— Tim

32

Chỉ cần thêm một hàm băm với ID của một thành phần vào URL. Ví dụ

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

và

http://mysite.com/#about

Vì vậy, liên kết sẽ trông như:

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

hoặc chỉ

<a href="#about">About</a>

— Kling
nguồn

21

Đây là cách thực hiện:

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

<div id="go_middle">Hello There</div>

— Sarfraz
nguồn

2

Bạn là gì? Bạn đã kết thúc </a>sau khi mở <div ...>- không thực sự chắc chắn những gì bạn đang cố gắng làm ở đây.

— Đaminh Rodger

1

tôi đã sao chép dòng liên kết của mình và dán bên dưới và quên đóng div. Dù sao đi nữa cũng xin cám ơn.

— Sarfraz

10

Bạn có hai lựa chọn:

Bạn có thể đặt một neo trong tài liệu của bạn như sau:

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

Hoặc nếu không, bạn cung cấp id cho bất kỳ thành phần HTML nào:

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

Sau đó, chỉ cần nối băm #refvào URL của liên kết của bạn để chuyển đến tham chiếu mong muốn. Thí dụ:

<a href="document.html#ref">Jump to ref in document.html</a>

— Daniel Vassallo
nguồn

6

Vào ngày 12 tháng 3 năm 2020, một bản nháp đã được WICG thêm vào cho Đoạn văn bản và bây giờ bạn có thể liên kết đến văn bản trên một trang như thể bạn đang tìm kiếm nó bằng cách thêm phần sau vào hàm băm

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

Ví dụ làm việc trên Chrome Version 81.0.4044.138:

Nhấp vào liên kết này Nên tải lại trang và tô sáng văn bản của liên kết

— Abderrahmane TAHRI JOUTI
nguồn