Chia sẻ mẫu code nút Back To Top chuẩn đẹp, dễ dùng

Chào mọi người, bài viết này mình đọc được bên khaweb.vn chia sẽ về thủ thuật back to top (lên đầu trang) khá chuẩn và đẹp mắt cho mọi người.

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 luận

Nút lên đầu trang (Back to Top) tuy là một chi tiết nhỏ nhưng lại đóng vai trò quan trọng trong việc cải thiện trải nghiệm người dùng và nâng cao tính chuyên nghiệp của website. Với vài đoạn code HTML, CSS và JavaScript thuần, bạn đã có thể tạo ra một nút Back to Top đẹp, nhẹ, chuẩn UX/UI và dễ dàng tuỳ biến theo phong cách thiết kế riêng.

Hy vọng qua hướng dẫn này, bạn sẽ áp dụng thành công để giúp website thân thiện hơn, mượt mà hơn và tạo ấn tượng tốt hơn với người dùng. Nếu thấy nội dung có giá trị, đừng quên đánh giá 5 sao để tiếp thêm động lực cho KHAWEB tiếp tục chia sẻ nhiều bài viết chất lượng hơn.

Chúc mọi người thành công với tiện ích trên.

DEMO TẠI BÀI VIẾT NÀY

↑

Lê Hùng ✅