Khi các bạn có một bài viết dài, trong đó được chia ra nhiều mục. Hay nói cách khác, các bạn muốn chia bài viết ra nhiều phần nhỏ cho người dùng dễ tìm đến phần cần xem. Khi đó các bạn sẽ tìm cách tạo mục lục cho bài viết của mình. Dù đã có được bài viết với mục lục khá đẹp mắt nhưng lúc này người dùng bấm vào mục lục lại nhảy đột ngột đến khu vực cần truy cập đến. Điều này làm các bạn khó chịu?
Bài này mình chia sẻ với các bạn đoạn code tạo hiệu ứng trượt mượt mà cho liên kết neo (anchor link) trong Blogspot.
Vậy liên kết neo (anchor link) là gì?
Liên kết neo (liên kết nội bộ) hay còn gọi là Anchor link nghĩa là một liên kết trong văn bản sẽ dẫn đến một vị trí đặc biệt trong cùng tài liệu (cùng một trang) mà không phải tải lại hoặc mở một trang mới. Một liên kết neo (anchor link) sẽ có hai phần:
1. Khu vực được neo, được khai báo bằng thẻ bất kỳ với thuộc tính id hoặc name
▪ ví dụ: <h2 id="diem-den">Điểm đến của liên kết neo</h2>
2. Liên kết neo, được khai báo bằng thẻ <a> có thuộc tính là href nhưng giá trị là có dấu # và tên id của khu vực cần truy cập đến
▪ ví dụ: <a href="#diem-den">xem nội dung</a>.
Khi nhấp vào liên kết "xem nội dung" thì nó sẽ tự động nhảy đến khu vực được gán thuộc tính id="diem-den". Đây chính là thủ thuật được áp dụng trong những cách tạo mục lục cho bài viết.
Không dong dài nữa, dưới đây là:
Code hiệu ứng trượt mượt mà cho liên kết neo (anchor link) trong Blogspot
Trước tiện các bạn xem qua:
👉 Nội dung không có hiệu ứng trượt.
👉 Nội dung có hiệu ứng trượt.
Để thêm hiệu ứng trượt vô cùng đơn giản, các bạn chỉ việc vào trang quản trị Blogger -> Chủ đề -> Chỉnh sửa HTM và thêm đoạn code dưới đây vào trước thẻ </body> là xong.
<script>//<![CDATA[
jQuery(function() {
jQuery('a[href*="#"]:not([href="#"])').click(function()
{
if
(location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var target =
jQuery(this.hash);
target =
target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
if (target.length) {
jQuery('html,
body').animate({
scrollTop:
target.offset().top
}, 1000);
return false;
}
}
});
});
//]]></script>
Bổ sung bài cũ:
.scrollIntoView(true); (tô vàng) thành .scrollIntoView({ behavior: 'smooth', block: 'center' })
Facebook