Back to top sử dụng Jquery

Back to top - Một chức năng hay cho những trang web  có nội dung dài, nhất là mấy trang dạng Load more, cứ load một hồi thì kéo lên mỗi tay.

Cách tạo chức năng này cũng khá đơn giản, vài dòng CSS để định dạng vị trí của nút, vài dòng Script để tạo hiệu ứng back to top và cuối cùng một tấm ảnh thể hiện back to top.

CSS

#back-to-top {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 9999;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 30px;
    background: #f5f5f5;
    color: #444;
    cursor: pointer;
    border: 0;
    border-radius: 2px;
    text-decoration: none;
    transition: opacity 0.2s ease-out;
    opacity: 0;
}
#back-to-top:hover {
    background: #e9ebec;
}
#back-to-top.show {
    opacity: 1;
}

jQuery

if ($('#back-to-top').length) {
    var scrollTrigger = 100, // px
        backToTop = function () {
            var scrollTop = $(window).scrollTop();
            if (scrollTop > scrollTrigger) {
                $('#back-to-top').addClass('show');
            } else {
                $('#back-to-top').removeClass('show');
            }
        };
    backToTop();
    $(window).on('scroll', function () {
        backToTop();
    });
    $('#back-to-top').on('click', function (e) {
        e.preventDefault();
        $('html,body').animate({
            scrollTop: 0
        }, 700);
    });
}

Và cuối cùng, một thể <a> để tạo siêu liên kết
<a href="https://www.blogger.com/blogger.g?blogID=2727723724993495997#" id="back-to-top" title="Back to top"><img height="48" src="link-anh-cua-ban" width="48" /></a>

Nhớ thay link ảnh để hiển thị đẹp hơn!
Demo bạn xem ngay trên trang này luôn nha!

hải long