Tạo nút cuộn trang bằng Javascritp đơn giản, nhẹ nhàng, tình cảm

GroupMMO tháng 4 25, 2019

Trong bài viết trước, mình đã giới thiệu với các bạn cách tao nút cuộn back to top chỉ bằng CSS rất đơn giản. Cách làm đó có một nhược điểm đó là ít tùy biến và khi lên đầu trang nó sẽ kèm theo một cái dấu "#" ở trong URL của trang. Nếu bạn nào thích tùy biến nhiều hơn thì dùng JQuery sẽ có nhiều hiệu ứng đẹp. Nếu bạn nào chỉ muốn đơn giản, nhẹ nhàng, tình cảm thì thử dùng Javascript xem sao nhé.

Tạo nút cuộn trang bằng Javascritp đơn giản

Mô tả

Phần này mình nói luôn để các bạn hiểu nút cuộn làm bằng Javascript thì nó sẽ khác gì với CSS. Điểm khác biệt lớn nhất là khi cuộn trang nó sẽ không có thêm cái ký tự "#" ở trong URL và chúng ta có thể điều chỉnh để nút cuộn trang này ẩn hiện theo ý muốn. Giống như kiểu chúng ta phải kéo xuống đến đâu đó thì nút cuộn mới hiện ra chẳng hạn.
Nếu nút cuộn trang này phù hợp với mong muốn của bạn thì hẵng làm nhé. Nếu không phù hợp thì đừng thử lại mất thời gian ra (vọc code mất thời gian lắm =_=).

Tạo nút cuộn trang bằng Javascritp đơn giản, nhẹ nhàng, tình cảm

Code của em nó đây:

<a id="nutbacktotop" href="javascript:void(0)" title="Back to Top"><img src="https://nhatbanonline.net/wp-content/uploads/2019/03/back-to-top.png" alt="Quay lại đầu trang"/></a>
<script>
//Khi người dùng cuộn chuột thì gọi hàm scrollFunction
window.onscroll = function() {scrollFunction()};
// khai báo hàm scrollFunction
function scrollFunction() {
// Kiểm tra vị trí hiện tại của con trỏ so với nội dung trang
if (document.body.scrollTop > 2000 || document.documentElement.scrollTop > 2000) {
//nếu lớn hơn 2000px thì hiện button
document.getElementById("nutbacktotop").style.display = "block";
} else {
//nếu nhỏ hơn 20px thì ẩn button
document.getElementById("nutbacktotop").style.display = "none";
}
}
//gán sự kiện click cho button
document.getElementById('nutbacktotop').addEventListener("click", function(){
//Nếu button được click thì nhảy về đầu trang
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
});
</script>

Còn đây là CSS của thẻ <a> bên trên

#nutbacktotop {position:fixed;bottom:10px;right:10px;z-index: 1000;}

Những chỗ có màu đỏ các bạn chú ý nhé. Phần link là link của nút cuộn trang, các bạn tự thiết kế up lại rồi thay link nhé. Còn chỗ có số 2000 thì cũng giải thích rõ trong coder rồi, khi các bạn kéo trang xuống 2000px thì nút cuộn trang nó mới hiện. Các bạn chỉnh số này cho phù hợp theo sở thích nhé.

Code trên các bạn có thể copy vào chỗ footer hoặc header thì tùy. Còn bạn nào mà chưa biết chèn code vào đâu thì xem qua bài viết Thêm bài viết liên quan trong wordpress không dùng plugin nhé. Trong bài này mình đã hướng dẫn khá chi tiết với hình ảnh rõ ràng rồi đó. Mình mới làm trên wordpress và cũng chưa thử với blogspot nhưng chắc là không vấn đề gì đâu. Bạn nào rảnh thử rồi comment bên dưới nhé. Còn demo của nút bấm này thì các bạn vào trang Nhật Bản Online theo link https://nhatbanonline.net để xem nhé.

Chúc các bạn thành công! Nếu không thành công thì ới mình, nếu biết mình sẽ giải đáp cho.