Tạo hiệu ứng cuộn mượt bằng jquery (smooth scrolling)

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á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.

$(".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 #id

thành a là được, nó sẽ có dạng như sau:

$("a").on('click', function(event) {

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:
$("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ả.

Lời kết

Rất đơn giản thôi, bạn hoàn toàn đã có thể tạo ra hiệu ứng cuộn mượt mà cho nhiều vị trí trong website/blog rồi đấy. Nếu để ý thì trong bài viết ở thanh tác vụ bên trái (nếu online bằng pc hay laptop mới có vì mình ẩn trên mobile và ipad rồi) có biểu tượng click vào sẽ xuống khung comment facebook đấy, bạn hoàn toàn có thể thử hoặc ở icon trỏ xuống chuyên mục tâm sự cũng có. Chúc các bạn áp dụng được vào vị trí mình mong muốn nhé.