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.

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:

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

5/5 (1 bình chọn)
Chia sẻ
Series: Dự án Landing Page