Tạo nút back to top bằng jQuery

Nút back to top là chức năng giúp cho người đọc quay lên đầu trang nhanh thay vì phải kéo chuột liên tục. Đặc biệt những bài viết có nội dung dài lê thê nó sẽ làm tăng trải nghiệm người dùng. Hôm nay mình sẽ hướng dẫn bạn tạo ra một button back to top bằng ngôn ngữ JavaScript và cả jQuery nữa.

Hướng dẫn tạo nút back to top bằng JQuery

Bước 1: Tạo button bằng HTML và biểu tượng bằng Font awesome

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div id="main-content">
    <strong>Nội dung</strong>
</div>
<a id="button-to-top"></a>

Bước 2: Style CSS để button đẹp hơn

Vì là ví dụ nên mình sẽ đặt cho main-content chiều cao là 1000px. Còn khi đưa vào website bạn hãy bỏ đoạn CSS này đi.

#main-content {
    width: 100%;
    height: 1000px;
    background: #ddd;
}

Tiếp theo đó cần phải cho cố định ở một vị trí trên màn hình bằng position: fixed.

#main-content {
  height: 1000px;
}
#button-to-top {
  border-radius: 3px;
    color: #fff!important;
    line-height: 20px;
    transition: all .5s ease-in-out;
    background: linear-gradient(
180deg
,#90a4ae,#78909c);
    width: 40px; /* Chiều rộng button */
    height: 40px; /* Chiều cao button */
    position: fixed; /* Cố định vị trí */
    right: 10px; /* Button cách mép màn hình bên phải */
    bottom: 40px; /* Button cách mép màn hình bên dưới */
    z-index: 1000001;
    cursor: pointer;
}
#button-to-top::after {
  content: "f077"; /* Biểu tượng mũi tên đi lên */
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 25px;
  line-height: 40px;
  margin-left: 7px;
  color: #fff;
}
#button-to-top:hover {
  cursor: pointer;
  background-color: #333;
}
#button-to-top:active {
  background-color: #555;
}
#button-to-top.show {
  opacity: 1;
  visibility: visible;
}

.main-content {
  width: 77%;
  margin: 50px auto;
  font-size: 15px;
  color: #333;
  line-height: 1.9;
}
@media (min-width: 500px) {
  .main-content {
    width: 43%;
  }
  #button-to-top {
    margin: 30px;
  }
}

Bước 3: Cuối cùng bạn sẽ thêm đoạn mã JavaScript ở ngay phía trước thẻ đóng </body>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
var btn = jQuery('#button-to-top');

jQuery(window).scroll(function() {
  if (jQuery(window).scrollTop() > 300) {
    btn.addClass('show');
  } else {
    btn.removeClass('show');
  }
});

btn.on('click', function(e) {
  e.preventDefault();
  jQuery('html, body').animate({scrollTop:0}, '300');
});
</script>

Giải thích đoạn mã Js:

  • Đầu tiên khai báo một biến là var btn bằng cách lấy theo id là button-to-top
  • Nếu màn hình máy tính lớn hơn 300px thì sẽ thêm class là show cách bằng phương thức addClass
  • Ngược lại nhỏ hơn 300px thì sẽ xóa cái class đó đi
  • Tiếp theo sẽ lắng nghe sự kiện nhấp chuột và sử dụng .animate() để chuyển động lên trên top

Kết luận: jQuery hỗ trợ khá tốt về phía Front end trên trình duyệt. Qua bài viết này bạn cũng sẽ biết được thêm một vài thứ hữu ích để áp dụng tốt hơn trong những tính năng liên quan.

Related Posts

Lisp – Cái nhìn tổng quan về ngôn ngữ lập trình đặc biệt

Lisp là gì? Lisp là một ngôn ngữ lập trình đặc biệt mang đến một cách tiếp cận độc đáo trong việc xử lý thông tin và…

Cách sử dụng đường dẫn tương đối trong HTML

Cách sử dụng đường dẫn tương đối trong HTML

Trang web hiện đại thường bao gồm nhiều tài nguyên như hình ảnh, trang HTML khác, tệp tin CSS và JavaScript. Để liên kết và truy cập…

Bài tập về hàm split trong Python

Chuỗi là một loại dữ liệu phổ biến trong lập trình, và việc xử lý chuỗi là một kỹ năng cần thiết cho các lập trình viên….

Xử lý chuỗi trong Python: Các phương thức cơ bản

Python là một trong những ngôn ngữ lập trình phổ biến nhất hiện nay. Nó được sử dụng rộng rãi trong nhiều lĩnh vực, từ phát triển…

Tạo Form đăng ký bằng Javascript

Ghi đè trong java, cách thực hiện chi tiết

Trong lập trình hướng đối tượng, ghi đè là một kỹ thuật cho phép các đối tượng con ghi đè lại phương thức của đối tượng cha…

Khai báo biến trong Python: Hướng dẫn cho người mới

Khai báo biến là một trong những khái niệm cơ bản nhất trong bất kỳ ngôn ngữ lập trình nào, và Python cũng không phải là ngoại…