Smooth Scrolling - hiệu ứng cuộn mượt chắc hẳn không còn xa lạ đối với các bạn làm website/blog rồi nhỉ?! Thông thường ta hay bắt gặp hiệu ứng này khi bạn click nút lên đầu trang (back to top), xuống cuối trang (back to bottom) hay các chỉ mục trong menu bài viết, icon trỏ xuống ở header...
Vậy giờ ta làm như thế nào để được như vậy? Thật ra có nhiều cách lắm nhưng mình sẽ hướng dẫn cho các bạn cách dùng Jquery để làm nhé. Trước khi bắt đầu, để dễ demo cho các bạn chưa biết thì hãy click vào đây để xuống cách làm.
Còn nếu muốn áp dụng cho nhiều thẻ (không phải tất cả) thì bạn thêm theo cú pháp:
Trong đó: A và B là các class, id bạn muốn thêm và chúng được ngăn cách nhau bằng dấu "," nhé.
2.
Bước 4: Lưu template lại và xem kết quả.
Vậy giờ ta làm như thế nào để được như vậy? Thật ra có nhiều cách lắm nhưng mình sẽ hướng dẫn cho các bạn cách dùng Jquery để làm nhé. Trước khi bắt đầu, để dễ demo cho các bạn chưa biết thì hãy click vào đây để xuống cách làm.
Cách thực hiện
Bước 1: Truy cập blogger.com - Chủ đề - Chỉnh sửa HTML.
Bước 2: Thêm thư viện Jquery trước thẻ
</head>(nếu có rồi thì bỏ qua bước này)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Bước 3: Sau đó, chèn đoạn Jquery sau trước thẻ
</body>
<script>
$(document).ready(function(){
$(".class hoặc #id").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
}
});
});
</script>Cấu trúc
Trước khi tìm hiểu về đoạn Jquery trên, mình muốn đưa ra cấu trúc hoàn chỉnh của 1 đoạn giúp tạo hiệu ứng cuộn. Nó sẽ có dạng như sau:
<a href="#vị_trí_cần_cuộn_đến" title="Example">Click vào đây</a> // Phần tử nguồn
<p id="vị_trí_cần_cuộn_đến"></p> // Phần tử đích
Như các bạn có thể thấy, chúng ta luôn luôn phải cần ít nhất 2 đoạn code trên với Nguồn và Đích để có thể tạo hiệu ứng. Các bạn hoàn toàn có thể đặt vị trí 2 đoạn code trên ở bất kì chỗ nào trong tổng thể code của các bạn.
Cách sử dụng
Tại đây bạn chỉ cần lưu ý đúng 2 dòng sau (mình copy hẳn ra cho bạn dễ tìm) để sử dụng thôi, còn lại không cần quan tâm.
1.
$(".class hoặc #id").on('click', function(event) {: điền class hoặc id của thẻ a (thẻ liên kết) mà bạn muốn dùng hiệu ứng. Nếu muốn áp dụng cho tất cả thẻ a thì rất đơn giản, bạn chỉ cần thay cụm
.class hoặc #idthành a là được, nó sẽ có dạng như sau:
$("a").on('click', function(event) {$("A, B,...").on('click', function(event) {Trong đó: A và B là các class, id bạn muốn thêm và chúng được ngăn cách nhau bằng dấu "," nhé.
2.
}, 800, function(){: số 800 chính là khoảng thời gian kể từ lúc click cho cuộn đến phần tử đích (được tính bằng mili giây - ms). Điều này có nghĩa là gì? Số càng lớn thì hiệu ứng cuộn càng chậm và ngược lại.
Bước 4: Lưu template lại và xem kết quả.
