Dự án Landing Page: Nút trở lên đầu trang

HTML

<div id="back-to-top"><span class="fa fa-angle-up"></span></div>

CSS

/* Back to top */
#back-to-top {
    line-height: 29px;
    width: 35px;
    height: 35px;
    font-size: 21px;
    transition: .3s;
    position: fixed;
    right: 40px;
    bottom: 40px;
    z-index: 12;
    color: #ff1654;
    box-shadow: 0px 0px 1px 0 rgba(0, 0, 0, 0.15);
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid;
    border-color: #ff1654;
    text-align: center;
    cursor: pointer;
    display: none;
}

#back-to-top:hover {
    color: #fff;
    background: #ff1654;
    border-color: #ff1654;
}

jQuery

Ta vẫn sử dụng sự kiện $(window).scroll(); để nhận biết, cập nhật lại main.js như sau.

$(document).ready(function() {
    $(window).scroll(function() {
        if ($(this).scrollTop() > 50) {
            $('.navbar').addClass('moving');
            $('#logo').attr('src', 'img/logo-dark.png');
        } else {
            $('.navbar').removeClass('moving');
            $('#logo').attr('src', 'img/logo-light.png');
        }
        
        if ($(this).scrollTop() > 250) {
            $('#back-to-top').fadeIn();
        } else {
            $('#back-to-top').fadeOut();
        }
    });
    
    $('#back-to-top').click(function() {
        return $('body, html').animate({scrollTop: 0}, 400), !1;
    });
});

Vậy là chúng ta đã hoàn thành dự án, bạn có thể tải về tại đây để so sánh kết quả.

Tải về

Các bài viết tham khảo thêm:

• Tạo Favicon đầy đủ cho website trên cả máy tính và di động
• Open Graph và Twitter Cards cơ bản
• Tạo hiệu ứng Chờ tải trang (Preload)
• Hiệu ứng khi scroll với WOW.js
• Nhúng Facebook vào website của bạn
• Tích hợp Tin nhắn Fanpage làm Facebook LiveChat vào website

Chúc các bạn thành công!