Cách Tạo Nút Back to Top Cho Blogger Không Cần jQuery

Nút lên đầu trang (Back to Top) là một nút điều hướng giúp người đọc nhanh chóng quay về đầu trang sau khi cuộn xuống những phần nội dung phía dưới.

Đối với các blog có bài viết dài, nút Back to Top giúp người đọc quay lại tiêu đề, mục lục hoặc thanh điều hướng mà không cần cuộn thủ công qua toàn bộ bài viết.

Trong bài viết này, Blog Vn Chia sẻ hướng dẫn cách tạo nút Back to Top cho Blogger bằng CSS và JavaScript thuần, không cần tải thêm jQuery hoặc Font Awesome.

Kết quả sau khi thực hiện

Khi người đọc cuộn xuống khoảng 400 px, nút mũi tên sẽ xuất hiện ở góc dưới bên phải màn hình. Nhấn vào nút để quay về đầu trang.

Nội dung bài viết

1. Nút Back to Top là gì?
2. Ảnh minh họa nút Back to Top
3. Bước 1: Sao lưu theme Blogger
4. Bước 2: Chèn mã Back to Top
5. Bước 3: Tùy chỉnh nút
6. Bước 4: Kiểm tra sau khi cài đặt
7. Khắc phục lỗi thường gặp
8. Câu hỏi thường gặp

1. Nút Back to Top là gì?

Back to Top có nghĩa là quay về đầu trang.

Đây là một thành phần điều hướng thường được đặt cố định tại góc dưới của màn hình.

Khi người đọc cuộn xuống một khoảng nhất định, nút sẽ xuất hiện. Người đọc chỉ cần nhấn nút để quay lại phần đầu trang.

Chức năng này có thể hữu ích khi blog có:

• Bài viết dài với nhiều đề mục.
• Hướng dẫn từng bước kèm nhiều hình ảnh.
• Danh sách tài liệu hoặc nội dung tham khảo.
• Bài viết được đọc trên màn hình điện thoại.

Tuy nhiên, không nên đặt nút quá lớn hoặc che nội dung, quảng cáo hay các nút điều hướng khác.

2. Hình ảnh minh họa nút Back to Top

Dưới đây là hình ảnh từ bài hướng dẫn trước đây của Blog Vn Chia sẻ.

Hình 1. Nút Back to Top trên giao diện Blogger trong bài hướng dẫn gốc.

3. Bước 1: Sao lưu theme Blogger

Trước khi chỉnh sửa mã HTML của theme, bạn nên tạo một bản sao lưu để có thể khôi phục nếu thao tác sai.

Thực hiện:

1. Đăng nhập Blogger.
2. Chọn blog muốn chỉnh sửa.
3. Mở mục Chủ đề.
4. Chọn chức năng Sao lưu trong menu quản lý theme.
5. Tải tệp XML về máy tính.

Lưu ý:

Nên lưu tệp theme XML gốc thay vì chỉ sao chép toàn bộ mã HTML vào Word. Việc lưu đúng định dạng giúp bạn thuận tiện hơn khi cần khôi phục theme.

4. Bước 2: Chèn mã Back to Top vào theme Blogger

Sau khi sao lưu, quay lại:

Blogger → Chủ đề → Chỉnh sửa HTML

Nhấn Ctrl + F và tìm:

</body>

Đặt con trỏ ngay phía trước thẻ đóng này.

Sau đó sao chép toàn bộ đoạn mã bên dưới và dán vào vị trí vừa tìm.

Chú ý:

Đây là mã dành cho theme XML của Blogger. Không dán mã vào phần nội dung bài đăng nếu bạn muốn nút xuất hiện trên toàn bộ blog.

Mã Back to Top hoàn chỉnh

<!-- BACK TO TOP - BLOG VN CHIA SE -->

<style type='text/css'>

#bvc-back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: #0066cc;
  color: #ffffff;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease;
}

#bvc-back-to-top.bvc-show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

#bvc-back-to-top:hover {
  background: #004b99;
}

#bvc-back-to-top:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 3px;
}

@media (max-width: 600px) {
  #bvc-back-to-top {
    right: 15px;
    bottom: 20px;
    width: 44px;
    height: 44px;
    font-size: 23px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #bvc-back-to-top {
    transition: none;
  }
}

</style>

<button
  id='bvc-back-to-top'
  type='button'
  aria-label='Lên đầu trang'
  title='Lên đầu trang'>
  &#8593;
</button>

<script type='text/javascript'>
//<![CDATA[

(function () {
  'use strict';

  var button = document.getElementById(
    'bvc-back-to-top'
  );

  if (!button) {
    return;
  }

  function updateButton() {
    if (window.scrollY > 400) {
      button.classList.add('bvc-show');
      button.removeAttribute('tabindex');
    } else {
      button.classList.remove('bvc-show');
      button.setAttribute('tabindex', '-1');
    }
  }

  button.addEventListener('click', function () {

    var reduceMotion = window.matchMedia(
      '(prefers-reduced-motion: reduce)'
    ).matches;

    window.scrollTo({
      top: 0,
      behavior: reduceMotion ? 'auto' : 'smooth'
    });

  });

  window.addEventListener(
    'scroll',
    updateButton,
    { passive: true }
  );

  updateButton();

})();

//]]>
</script>

<!-- END BACK TO TOP -->

Sau khi chèn mã, chọn Lưu.

Nếu Blogger thông báo lỗi XML, hãy kiểm tra xem bạn đã sao chép đầy đủ các thẻ đóng và phần CDATA trong đoạn JavaScript hay chưa.

5. Bước 3: Tùy chỉnh nút Back to Top

Thay đổi màu sắc

Trong đoạn CSS, tìm:

background: #0066cc;

Bạn có thể thay mã màu này bằng màu phù hợp với giao diện blog.

Thay đổi vị trí

Tìm hai thuộc tính:

right: 20px;
bottom: 20px;

Giá trị right quyết định khoảng cách từ nút đến mép phải màn hình; bottom quyết định khoảng cách từ nút đến mép dưới.

Thay đổi thời điểm xuất hiện

Trong JavaScript, tìm:

if (window.scrollY > 400)

Số 400 nghĩa là nút xuất hiện khi người đọc cuộn xuống quá 400 px.

Nếu muốn nút xuất hiện muộn hơn, bạn có thể thay thành 600.

6. Bước 4: Kiểm tra sau khi cài đặt

Sau khi lưu theme, hãy mở một bài viết dài và kiểm tra:

1. Nút chưa xuất hiện khi trang vừa mở ở đầu.
2. Nút xuất hiện khi cuộn xuống đủ xa.
3. Nhấn nút sẽ quay về đầu trang.
4. Nút không che nội dung trên điện thoại.
5. Nút không trùng với nút chat hoặc thành phần nổi khác.

Hình 2. Kết quả thêm nút Back to Top trong bài hướng dẫn gốc. Nút mới có thể khác đôi chút về kiểu dáng.

7. Khắc phục lỗi thường gặp

Không thấy nút Back to Top

Hãy thử cuộn xuống hơn 400 px. Nút được thiết kế để ẩn khi người đọc đang ở đầu trang.

Nếu vẫn không xuất hiện, kiểm tra đoạn mã đã được lưu thành công trong theme chưa.

Có hai nút lên đầu trang

Theme có thể đã tích hợp sẵn chức năng này hoặc còn lưu đoạn mã Back to Top trước đây.

Hãy kiểm tra và chỉ giữ một phiên bản để tránh trùng lặp.

Nút che quảng cáo hoặc nút chat

Điều chỉnh giá trị right và bottom để tạo khoảng cách phù hợp.

Kiểm tra riêng trên điện thoại vì không gian màn hình nhỏ hơn máy tính.

Blogger báo lỗi khi lưu theme

Hãy kiểm tra xem đoạn mã có bị thiếu thẻ đóng hoặc bị thay đổi ký tự khi sao chép hay không.

Nếu đang sử dụng một theme tùy chỉnh có cấu trúc đặc biệt, bạn nên thử mã trên bản sao trước khi áp dụng cho blog chính.

8. Câu hỏi thường gặp

Có cần cài jQuery để tạo nút Back to Top không?

Không. Đoạn mã trong bài viết sử dụng JavaScript thuần và không cần jQuery.

Có cần Font Awesome không?

Không. Nút sử dụng ký hiệu mũi tên Unicode nên không cần tải thư viện biểu tượng.

Có thể sử dụng nút trên điện thoại không?

Có. Đoạn CSS có thiết lập riêng cho màn hình nhỏ.

Có cần thêm mã vào từng bài viết không?

Không. Nếu cài vào theme Blogger, nút có thể xuất hiện trên các trang sử dụng theme đó.

Có nên cài nhiều hiệu ứng chuyển động không?

Bạn nên ưu tiên nút dễ nhìn, dễ nhấn và không gây mất tập trung. Hiệu ứng đơn giản thường phù hợp hơn với blog có nhiều nội dung dài.

Kết luận

Nút Back to Top là một thành phần điều hướng nhỏ nhưng có thể giúp người đọc sử dụng blog thuận tiện hơn.

Với CSS và JavaScript thuần, bạn có thể tạo nút lên đầu trang mà không cần thêm jQuery hoặc thư viện biểu tượng.

Trước khi chỉnh sửa theme, hãy sao lưu tệp XML và kiểm tra xem blog đã có nút Back to Top hay chưa để tránh cài đặt trùng lặp.

Bài viết liên quan

Cách hiển thị bài viết theo nhãn Label trong Blogger

Cách tạo tiện ích bài viết mới nhất trong Blogger

Tại sao chọn Blogger để tạo blog?

Ghi chú: Bài viết được cập nhật từ hướng dẫn tạo nút Back to Top trước đây của Blog Vn Chia sẻ. Hai ảnh gốc được giữ lại làm tư liệu minh họa.

Share: