Chia sẻ code nút lên đầu trang (back to top) đẹp

Trong quá trình thiết kế website, đặc biệt là các trang có nội dung dài như blog, trang tin hay landing page, nút lên đầu trang (Back to Top) là một chi tiết nhỏ nhưng mang lại hiệu quả lớn về trải nghiệm người dùng (UX). Thay vì phải cuộn chuột liên tục để quay lại đầu trang, người dùng chỉ cần một cú click là có thể trở về ngay, giúp thao tác nhanh hơn và cảm giác sử dụng website mượt mà, chuyên nghiệp hơn.

Bài này mình sẽ hướng dẫn cho các bạn một vài đoạn code đơn giản để làm nút lên đầu trang (Back to Top).

Nút lên đầu trang (Back to Top) là gì?

Nút lên đầu trang (Back to Top) là một nút chức năng thường xuất hiện ở góc dưới màn hình khi người dùng cuộn xuống một khoảng nhất định. Khi được nhấn, nút này sẽ tự động đưa trang web quay trở lại vị trí đầu trang, thường kèm theo hiệu ứng cuộn mượt.

Hiện nay, nút Back to Top không chỉ đơn thuần là một nút bấm, mà còn được thiết kế đẹp mắt với icon, hiệu ứng hover, animation hoặc vòng tròn hiển thị tiến độ cuộn, góp phần tăng tính thẩm mỹ và tạo cảm giác cao cấp cho website.

Đặc điểm của nút Back to Top

• Hình dáng:
  Thường là biểu tượng mũi tên hướng lên (⬆️, 🔼, ˄) hoặc chữ “Top”, “Lên đầu trang”.

• Vị trí:
  Phổ biến nhất là nằm cố định (sticky) ở góc dưới bên phải màn hình. Vị trí này thuận tiện cho thao tác, đặc biệt trên thiết bị di động.

• Cách hoạt động:
  Nút thường ẩn khi mới vào trang và chỉ hiển thị khi người dùng cuộn xuống một khoảng nhất định (ví dụ sau khi lướt qua khoảng 30% nội dung trang).

Hướng dẫn code nút lên đầu trang (Back to Top) đẹp chuẩn UX/UI

Mình sẽ hướng dẫn code nút Back to Top đẹp, gọn nhẹ và chuẩn UX/UI, sử dụng HTML, CSS và JavaScript thuần. Giải pháp này dễ áp dụng cho mọi website, không cần plugin, có hiệu ứng cuộn mượt và cho phép tuỳ biến linh hoạt theo màu sắc, kích thước cũng như phong cách thiết kế của bạn.

Bước 1: Thêm đoạn code HTML vào Footer (trước thẻ </body>).

 <div id="scroll-progress"> <svg width="72" height="72" viewBox="0 0 72 72"> <!-- vòng nền --> <circle cx="36" cy="36" r="32" class="bg"></circle> <!-- vòng tiến trình --> <circle cx="36" cy="36" r="32" class="progress"></circle> </svg> <span class="arrow">↑</span> </div> 

Bước 2: Dán CSS vào file style.css hoặc mục Custom CSS của theme.

 #scroll-progress { position: fixed; right: 24px; bottom: 24px; width: 72px; height: 72px; cursor: pointer; z-index: 99999; opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease; } #scroll-progress.show { opacity: 1; pointer-events: auto; } #scroll-progress:hover { transform: translateY(-4px); } /* SVG vòng tròn */ #scroll-progress svg { transform: rotate(-90deg); } /* vòng nền */ #scroll-progress .bg { fill: none; stroke: rgba(0,0,0,.15); stroke-width: 4; } /* vòng chạy theo scroll */ #scroll-progress .progress { fill: none; stroke: #000; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 201; stroke-dashoffset: 201; transition: stroke-dashoffset .2s linear; } /* nút tròn ở giữa */ #scroll-progress .arrow { position: absolute; inset: 10px; background: #000; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: bold; } 

Bước 3: Thêm JavaScript vào Advanced → Global Settings → Footer Scripts để xử lý hiệu ứng hiển thị và cuộn mượt.

<script>
document.addEventListener("DOMContentLoaded", function () {
    const btn = document.getElementById("scroll-progress");
    const progress = btn.querySelector(".progress");
    const pathLength = 201; // chu vi vòng tròn

    window.addEventListener("scroll", function () {
        const scrollTop = window.scrollY;
        const docHeight = document.documentElement.scrollHeight - window.innerHeight;
        const percent = scrollTop / docHeight;

        const offset = pathLength - percent * pathLength;
        progress.style.strokeDashoffset = offset;

        if (scrollTop > 150) {
            btn.classList.add("show");
        } else {
            btn.classList.remove("show");
        }
    });

    btn.addEventListener("click", function () {
        window.scrollTo({
            top: 0,
            behavior: "smooth"
        });
    });
});
</script>

Kết quả nó sẽ như này.

Kết luận