Tạo nút Scroll to Top cho trang WordPress

Bạn đã bao giờ lướt một trang web siêu dài và chợt nhận ra mình phải cuộn lên đầu trang? Vâng, ai cũng đã từng trải qua cảm giác đó. Nhưng đền buồn nào! Tạo ngay một nút “Scroll to Top” trên trang WordPress của bạn và làm cho độc giả thâm cám bạn vì đã giúi thoát họ khỏi nỗi khổ lăn chuột!

Cùng làm theo hướng dẫn sau đây để biến điều đó thành sự thật.

Bước 1: Thêm HTML và CSS

Hãy tưởng tượng bạn đang tô vẻ “nút ma thuật” này! Trước tiên, bạn cần thêm HTML để tạo nút và CSS để trang trí. Hãy vào WP-admin > Appearance > Theme File Editor mở file footer.php hoặc dùng plugin như Code Snippets nếu bạn không muốn động chạm đến theme.

<!-- Nút Scroll to Top -->
<div id="scrollToTop">
    ↑ Top
</div>

CSS Thần Thánh

Giờ thì chúng ta thêm một chút phong cách nhé. Thêm CSS vào file style.css của bạn:

#scrollToTop {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    cursor: pointer;
    background-color: #0073aa;
    width: 34px;
    height: 32px;
    color: white;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    font-size: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}

#scrollToTop:hover {
    background-color: #005f87;
}

Hóa trang xong, nhìn ngon chưa? Nếu muốn sáng tạo hơn, hãy thay “↑ Top” bằng icon ngộ nghĩnh độc lạ để tạo bất ngờ!

Bước 2: Thêm JavaScript tạo ma thuật

Bây giờ, nút của bạn sẽ không chỉ để trang trí, mà nó sẽ sống dậy. Thêm đoạn mã sau vào cuối file footer.php (hoặc file JS tùy chỉnh của bạn):

<script>
document.addEventListener('DOMContentLoaded', function () {
    const scrollToTopButton = document.getElementById('scrollToTop');

    // Hiện nút khi cuộn xuống
    window.addEventListener('scroll', function () {
        if (window.scrollY > 200) {
            scrollToTopButton.style.display = 'flex';
        } else {
            scrollToTopButton.style.display = 'none';
        }
    });

    // Cuộn lên đầu trang khi bấm nút
    scrollToTopButton.addEventListener('click', function () {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });
});
</script>

Bạn sẽ thấy nút xuất hiện khi cuộn xuống và “bay về đầu” khi bấm. Tuyệt cá vô lý luôn!

Bước 3: Tự kiểm tra

Hãy mở trang web của bạn và cuộn lên xuống xem đoạn mã có hoạt động tốt không, hi vọng là ổn nhỉ.

Nếu gây lỗi (hy hữu thôi), hãy xem lại file functions.php hoặc kiểm tra console trong dev tools (F12).

Bước 4: Tùy chỉnh thêm phong cách (Tùy Chọn)

Muốn cho nút “Scroll to Top” trở nên thân thiện, dễ thương hơn?

Thêm icon (sử dụng Font Awesome hoặc SVG).
Thay đổi màu sắc theo giao diện trang web.
Tuyệt nhất, cho hiệu ứng “nhấp nháy” mỗi khi cuộn xuống!

Tổng Kết

Bây giờ, bạn đã biết cách tạo thêm nút “Scroll to Top” cho trang WordPress rồi đúng không? Chỉ mất vài phút là độc giả của bạn đã có một trải nghiệm tuyệt vời. Núo chuột, click nút, và bay thôi!

Chúc bạn thành công và vui vẻ! 🌟

Thủ Thuật Wordpress