Bạn có thể dùng liên kết neo (<a>) trong HTML để liên kết đến trang khác hoặc trang web khác. Nhưng làm sao để liên kết đến một vị trí cụ thể trên trang?
Câu trả lời là jump links (liên kết nhảy).
Jump links là liên kết không chỉ tải trang, mà sẽ "nhảy" xuống một vị trí cụ thể trên trang. Bạn có thể dùng nội bộ để liên kết đến trang khác trên cùng website, thậm chí chia sẻ liên kết bên ngoài.
Các liên kết này hoạt động بغض النظر người dùng đến từ đâu, và không yêu cầu gì ngoài HTML cơ bản.
Tạo anchor jump links
Trong HTML, bạn tạo liên kết neo bằng cặp thẻ <a> với văn bản bên trong. Ví dụ:
<a>Đây là liên kết không dẫn đến đâu!</a>Dùng thuộc tính id cho mục tiêu liên kết
Để tạo jump link, cần một liên kết và một mục tiêu (target). Mục tiêu có thể là bất kỳ element nào trên trang có thuộc tính "id".
Mục tiêu phổ biến là tiêu đề hoặc phụ đề dùng thẻ H như <h1>, <h2>, <h3>, v.v. Thực tế tốt là thêm id cho mọi thẻ H cho mục đích này.
Giả sử trang web rất dài, muốn liên kết đến một đoạn như sau:
<h2 id="extra_content">Nội dung phụ không muốn liên kết</h2> <p> Lorem ipsum dolor sit amet... </p> <h2 id="linked_content">Phụ đề của đoạn muốn liên kết</h2> <p> Vivamus orci erat... </p>Liên kết đến element trong URL
Khi đã có element mục tiêu, tạo jump link bằng cách thêm #linked_content vào cuối URL của trang. Bất kỳ id nào của mục tiêu, thêm sau dấu # (thăng/hashtag).
Nếu đang trên trang và muốn nhảy xuống đoạn trên cùng trang, tạo internal link. Internal link không cần https://www.WebsiteName.com trong thuộc tính href.
Ví dụ internal jump link:
<a href="#linked_content">Liên kết đến phụ đề trên cùng trang</a>Nếu đặt liên kết trên trang web khác hoặc chia sẻ trên mạng xã hội/email? Cũng làm tương tự, thêm #linked_content vào cuối URL đầy đủ:
<a href="https://www.WebsiteName.com/PageName/#linked_content">Liên kết đến phụ đề trên cùng trang</a>Lưu ý về thuộc tính "name"
Trước đây, jump links dùng thuộc tính "name" trên thẻ neo rỗng. Cách này đã lỗi thời kể từ HTML5, theo Mozilla Developer Network. Có thể vẫn chạy trên một số trình duyệt, nhưng tôi khuyên dùng phương pháp hiện đại hơn.
Hy vọng bài này giúp bạn tạo jump links đến vị trí cụ thể trên trang!