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
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!