Nút Trở lên đầu trang đơn giản với Bootstrap 3

Trong bài viết này mình sẽ chia sẻ với các bạn cách tạo Back to top có hiệu ứng trượt, có thể tùy chỉnh theo ý thích. Hãy chắc chắn rằng trang bạn đang sử dụng Bootstrap 3 và đã có jQuery.

Nút Trở lên đầu trang

Bạn có thể xem demo ngay tại góc dưới bên phải của bài viết này.

HTML

Đặt ở cuối trang, có thể đặt sau <footer></footer>.

<div id="back-to-top" class="back-to-top" data-toggle="tooltip" data-placement="left" title="Trở lên đầu trang"><span class="glyphicon glyphicon-circle-arrow-up text-primary"></span></div>

CSS

Đặt ở tập tin CSS của trang.

.back-to-top {
    position: fixed;
    top: auto;
    left: auto;
    right: 15px;
    bottom: 15px;
    font-size: 32px;
    opacity: 0.8;
    z-index: 9999;
    cursor: pointer;
}

.back-to-top:hover {
    opacity: 1;
}

jQuery

$("#back-to-top").click(function(){return $("body, html").animate({scrollTop:0},400),!1});
$(function(){$('[data-toggle="tooltip"]').tooltip()});

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