Hướng dẫn tạo nút trở về đầu trang bằng jQuery

Nút trở về đầu trang (back to top hay là scrollTo Top) một ví dụ sử dụng jQuery là một sự cần thiết cho tất cả website hiện nay, tuy nhỏ nhưng rất có ích dành cho các bạn lười kéo chuột chỉ cần bấm vào link sẽ lên trên đầu trang web. Chức năng back to top rất tiện lợi cho người dùng thường được khách hàng yêu cầu khi xây dựng website.

Hôm nay trong bài này mình muốn hướng dẫn các bạn xây dựng tính năng này dựa trên nền jQuery. Miêu tả là khi ở đầu trang thì ta không thấy link back to top nhưng khi kéo xuống 1 đoạn sẽ thấy link và khi bấm nút go to top thì sẽ lên trên đầu trang đồng thời cũng mất đi link go scrollTo Top này.

1. Đầu tiên chúng ta chèn link back to top vào trong website, thường là ở dưới cùng còn năm trong thẻ body hay nói cách khác là trước thẻ đóng của body trong kịch bản HTML.

<a class="on_top" href="#top" style="display: block;"><i class="fa-arrow-circle-up fa"></i></a>

 2. Sau đó chúng ta tiến hàn style CSS cho link chúng ta được đẹp mắt, bạn có thể dùng image, hay là FA icon cũng được tùy vào sở thích của mỗi người. Ví dụ này mình dùng FA Icon.

<style>
a.on_top { opacity:0.6; display: none;}
a.on_top:hover{
background-color: #007bb6;
color: #fff;
border: 1px solid #007bb6;
opacity:1;
}
a.on_top i{ font-size: 20px;}
a.on_top {
border-radius: 6px;
background-color: #333333;
padding: 10px 20px;
white-space: nowrap; color: #fff;
position: fixed;
bottom: 75px;
right: 30px;
height: 44px;
}
</style>

Lưu ý : display:none để khi load trang lên sẽ không thấy link go to top , position:fixed để khi bạn kéo thanh cuộn trang web thì link sẽ chạy theo ở 1 vị trí cố định nào đó.

3. Thư viện jQuery

<script>
$(document).ready(function(){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('#on_top').fadeIn();
        } else {
            $('#on_top').fadeOut();
        }
    });
    $('#on_top').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });
});
</script>

Giải thích 1 chút về đoạn code trên: $(this).scrollTop() > 100 tức là khi kéo xuống độ chừng 100px là sẽ xuất hiện link go to top, fadeIn: hiện, fadeOut: ẩn. Tiếp đến là bắt sự kiến Click và trược lên trên. OK như vậy là chúng ta đã hoàn thành tính năng back top top (Trờ về đầu trang). Chúc các bạn thành công.

Để dễ làm các bạn có thể đưa cả 3 code trên vào trong cùng 1 widget nhé.