Tạo hiệu ứng trượt Scroll bằng JavaScript trong Wordpress

Để làm một trang web Landing Page cho một theme bất kỳ là một việc hoàn toàn đơn giản nếu như các bạn đọc qua bài viết này. Trong một lần muốn làm website Landing Page cho khách hàng, mình đã tìm ra một cách đơn giản dễ thực hiện nên chia sẽ luôn với các bạn!

Thẻ liên kết theo ID (Anchor Link)

Để thực hiện được bạn cần xem ôn lại một ví dụ cơ bản thẻ liên kết neo (liên kết nội bộ) hay còn gọi là (Anchor Link) nghĩa là liên kết trong siêu văn bản (HTML) sẽ dẫn đến một vị trí bất kỳ bên trong tài liệu HTML đó mà không phải tải lại hoặc không phải mở tài liệu mới!

Để thẻ liên kết neo hoạt động, chúng ta phải khai báo đủ 2 thành phần:

Khu vực được neo: một khu vực bất kỳ trên trang HTML, được khai báo bằng thẻ bất kỳ với thuộc tính ID=”gia_tri”. (Ví dụ: <p id=”doan-1″> </p>)
Liên kết neo: được khai báo bằng thẻ <a> nhưng có thuộc tính href có giá trị là dấu # cộng với tên ID của khu vực ta cần neo tới. (Ví dụ: <a href=”#doan-1″>Xem đoạn 1</a>)

Ta có thể thấy, bấm vào các liên kết trên thanh menu nó sẽ nhảy xuống các khu vực được gán thuộc tính ID tương ứng. Khi bấm các liên kết trên thanh menu thì trang web nó sẽ tự động trượt nhẹ nhàng lên hoặc xuống. Hiệu ứng đó không phải mặc định có sẵn, mà phải có mã JavaScript, để thực hiện việc đó các bạn cần làm như sau:

Tạo hiệu ứng trượt Scroll bằng JavaScript trong WordPress

Khi muốn nhấp vào menu hoặc một nút nào nào đó sẽ chuyển đến nội dung cần xem, bạn có thể làm theo hướng dẫn ở bước Thẻ liên kết theo ID (Anchor Link) mình có giới thiệu ở trên.

Đầu tiên bạn cần gắn JavaScript có hiệu ứng Scroll mượt mà vào website.

Bước 1: Copy code JavaScript Scrolling

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script LANGUAGE = "Javascript">
$(document).ready(function() {
$("a[href*='#']:not([href='#])").click(function() {
let target = $(this).attr("href");
$('html,body').stop().animate({
scrollTop: $(target).offset().top
}, 1000);
event.preventDefault();
});
});</script>

Bước 2: Dán code JavaScript vào header.php trong theme của bạn

Để biết file header.php nằm chỗ nào, các bạn vào Quản trị > Giao diện > Sửa > header.php. Hoặc tùy theo theme bạn đang dùng nhé.

Bước 3: Lưu lại nhớ xóa cache trình duyệt

Một số trường hợp không hoạt động bạn kiểm tra Plugin Cache đang dùng nhớ Clear sạch rồi chạy lại xem sao nhé. Chúc các bạn thành công, thật đơn giản phải không nào.