Tạo nút Back to Top chuyên nghiệp đẹp mắt

<!-- Nút Back to Top -->

<button id="back-to-top" aria-label="Lên đầu trang">

  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

    <polyline points="18 15 12 9 6 15"></polyline>

  </svg>

</button>

<!-- Script Vanilla JS siêu nhẹ -->

<script>

  document.addEventListener("DOMContentLoaded", function() {

    const btt = document.getElementById("back-to-top");

    window.addEventListener("scroll", function() {

      if (window.scrollY > 300) {

        btt.classList.add("show");

      } else {

        btt.classList.remove("show");

      }

    });

    btt.addEventListener("click", function() {

      window.scrollTo({ top: 0, behavior: "smooth" });

    });

  });

</script>

/* Khung định vị cơ bản Back To Top */

#back-to-top {

  position: fixed;

  bottom: 30px;

  right: 30px;

  z-index: 9999;

  opacity: 0;

  visibility: hidden;

  cursor: pointer;

  border: none;

  outline: none;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  transform: translateY(20px);

}

#back-to-top.show {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

}

#back-to-top svg {

  width: 22px;

  height: 22px;

  transition: transform 0.3s ease;

}

#back-to-top:hover svg {

  transform: translateY(-3px);

}

Bước 3: Chọn và chèn 1 trong 5 mẫu thiết kế Dán tiếp MỘT trong năm mẫu CSS dưới đây ngay bên dưới đoạn CSS ở Bước 2, tùy theo sở thích và phong cách giao diện blog của bạn.

Mẫu 1: Kính mờ (Glassmorphism) 

Phong cách tinh tế, có độ trong suốt và viền mờ ảo.

#back-to-top {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #e0e5ec;
  color: #64748b;
  box-shadow: 7px 7px 14px rgba(163, 177, 198, 0.6), 
             -7px -7px 14px rgba(255, 255, 255, 0.8);
}
#back-to-top:hover {
  color: #2563eb;
  box-shadow: inset 5px 5px 10px rgba(163, 177, 198, 0.5), 
              inset -5px -5px 10px rgba(255, 255, 255, 0.8);
}

#back-to-top {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #0f172a;
  color: #0ea5e9;
  border: 2px solid #0ea5e9;
}
#back-to-top:hover {
  background: #0ea5e9;
  color: #ffffff;
  box-shadow: 0 0 15px rgba(14, 165, 233, 0.5);
}

#back-to-top {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 6px 12px rgba(37, 99, 235, 0.3), 
              0 1px 3px rgba(37, 99, 235, 0.2);
}
#back-to-top:hover {
  background: #1d4ed8;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.4);
}