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

Phần cuối cùng của dự án Landing Page “Intense”, làm nút Trở lên đầu trang chỉ hiển thị khi kéo được một đoạn và mất khi trở lên trên cùng.

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:

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