Nút Trở lên đầu trang hay Back to top là một phần cơ bản của hầu hết website. Nó giúp cho người dùng dễ dàng trở về phần đầu của trang chỉ bằng một lần nhấp mà không phải kéo thanh trượt hoặc vuốt màn hình mỏi tay. Nếu một bài viết dài và có nhiều bình luận, trang sẽ rất dài và nếu trên di động bạn sẽ phải vuốt nhiều lần để có thể trở về đầu trang. Lúc đó Back to top quả là có ích, chỉ cần một nhấp.

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

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!

5/5 (1 bình chọn)
Chia sẻ
Series: Thủ thuật Front-end