Cafenapp: Tạo back-to-top quay trở lại đầu trang

Đôi khi trang web của bạn quá dài và bạn phải rê chuột để trở lại đầu trang. Như thế có lẽ cũng bất tiện. Thế nên, bạn cần phải tạo một nút quay trở lại nhanh chóng đầu trang sẽ thích hợp hơn.

1. Chèn thẻ html:

Bạn chèn mã sau vào phần cuối cùng của trang web.

<a id="back-to-top" href="#" class="btn btn-primary btn-lg back-to-top" role="button" title="Click to return on the top page" data-toggle="tooltip" data-placement="left"><span class="glyphicon glyphicon-chevron-up"></span></a>

2. Thêm CSS

.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display:none;
}

3. Cuối cùng là Javascript

$(document).ready(function(){
     $(window).scroll(function () {
            if ($(this).scrollTop() > 50) {
                $('#back-to-top').fadeIn();
            } else {
                $('#back-to-top').fadeOut();
            }
        });
        // scroll body to 0px on click
        $('#back-to-top').click(function () {
            $('#back-to-top').tooltip('hide');
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
        
        $('#back-to-top').tooltip('show');
});