Để hiểu rõ hơn về những thứ mình sắp trình bày, chắc bạn cần ôn qua một chút kiến thức về thẻ liên kếtvà đặc biệt là thẻ liên kết neo (liên kết nội bộ).
Để thẻ liên kết neo hoạt động, chúng ta phải khai báo đủ 2 thành phần:
Xem ví dụ cụ thể ở demo website sau: //bds4.ninhbinhweb.net
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.
Và nếu các bạn tinh ý sẽ thấy 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 phải không?
Hiệu ứng đó không phải mặc định có sẵn, mà phải có mã JavaScript tác động vào đấy! Hiệu ứng đẹp phải không? Theo dõi tiếp nhé!
Khi thiết kế Landing Page, chắc hẳn các bạn sẽ cần dùng đến các thẻ liên kết neo (Anchor Link) và cách chèn thẻ liên kết neo như nào thì mình vừa nói qua rồi.
Bước này chúng ta sẽ thao tác gắn JavaScript vào website để nó áp dụng hiệu ứng trượt mượt mà lên xuống nhé!
<br> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><br><script LANGUAGE = "Javascript"><br>$(document).ready(function() {<br>$(“a[href*=’#’]:not([href=’#])”).click(function() {<br>let target = $(this).attr(“href”);<br>$(‘html,body’).stop().animate({<br>scrollTop: $(target).offset().top<br>}, 1000);<br>event.preventDefault();<br>});<br>});</script>
Các bạn copy đoạn code JS trên nhé! Nhớ đừng copy thiếu kẻo nó không hoạt động được nhé!
Dán đoạn code vào bên trong cặp thẻ trong file header.php của theme nhé!
Đoạn code trên hoạt động với các thẻ liên kết neo và khi bạn ấn liên kết nó sẽ trượt mượt mà tới vị trí được neo.
Để biết file header.php nằm chỗ nào, các bạn vàoQuản trị > Giao diện > Sửa > Header.php.
Riêng các bạn dùng theme Flatsome có Child-theme thì hơi khác chút. Cụ thể là:Quản trị – Giao diện – Sửa – Chọn theme Flatsome – Header.php.
Các bạn quay trở lại trang chủ và xem thử đã Ok chưa nhé!
Một số trường hợp có thể không được vì lí do dùng các plugin nén Cache hoặc chặn JS. Do đó, khi gặp lỗi, nếu muốn chắc chắn hơn thì các bạn thử tắt các plugin đó để kiểm tra nhé!
Cám ơn các bạn đã quan tâm theo dõi và ủng hộ blog GiuseArt.com thường xuyên. Chúc các bạn thực hiện thành công nhé! Có thắc mắc hoặc sự cố gì trong quá trình thực hiện cứ bình luận để anh em tìm cách khắc phục nhé!