Code thêm nút quay lại đầu trang trong Elementor

Bài viết này mình sẽ hướng dẫn bạn cách thêm nút quay lại đầu trang trong Elementor nhé.

Bài viết dài, trang đích dài, khách cuộn xuống tới cuối trang rồi muốn quay lại đầu để bấm menu hay xem lại phần mở đầu thì phải kéo chuột ngược cả đoạn đường dài, rất bất tiện. Một nút tròn nhỏ nổi ở góc màn hình, bấm một cái là trang tự cuộn mượt về đầu, là chi tiết nhỏ nhưng khách dùng trang nào cũng quen tay bấm. Elementor bản miễn phí lẫn bản Pro đều không có sẵn widget hay tùy chọn nào để thêm nút này, nên muốn có thì bạn phải code thêm bằng PHP và JavaScript nhé.

Thêm code nút quay lại đầu trang

Bạn chỉ cần thêm code dưới vào cuối file functions.php của child theme nhé. Nhớ sao lưu file trước khi sửa, và đừng chèn vào theme cha vì khi theme cập nhật sẽ mất code.

<?php
// Nút quay lại đầu trang cho trang dựng bằng Elementor (bản miễn phí)
// Cách dùng: dán code này vào cuối file functions.php của child theme,
// nút tròn tự hiện ở góc phải dưới khi khách cuộn xuống quá 500px
add_action('wp_footer', 'nn_nut_quay_lai_dau_trang');
function nn_nut_quay_lai_dau_trang() {
    echo '<style>.nn-len-dau { position: fixed; right: 20px; bottom: 20px; z-index: 999; width: 48px; height: 48px; border: none; border-radius: 50%; background: #1A1B6B; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s, transform .3s, visibility .3s; box-shadow: 0 4px 14px rgba(0,0,0,.25); } .nn-len-dau.nn-hien { opacity: 1; visibility: visible; transform: translateY(0); }</style>';
    echo '<button type="button" class="nn-len-dau" id="nn-len-dau" aria-label="Quay lại đầu trang">&#8593;</button>';
    echo '<script>(function () { var nut = document.getElementById("nn-len-dau"); if (!nut) { return; } function kiemTra() { if (window.scrollY > 500) { nut.classList.add("nn-hien"); } else { nut.classList.remove("nn-hien"); } } window.addEventListener("scroll", kiemTra, { passive: true }); nut.addEventListener("click", function () { window.scrollTo({ top: 0, behavior: "smooth" }); }); kiemTra(); })();</script>';
}

Code trên móc vào wp_footer để chèn cả nút bấm, CSS và JavaScript vào cuối mọi trang. Nút là một thẻ button hình tròn màu xanh navy, mặc định ẩn hẳn (opacity 0, visibility hidden) nên lúc mới vào trang khách không thấy gì thừa. JavaScript nghe sự kiện cuộn trang: khi khách cuộn xuống quá 500px thì thêm class nn-hien cho nút hiện ra, cuộn ngược lên đầu thì nút tự ẩn đi. Bấm vào nút, hàm window.scrollTo với behavior: “smooth” sẽ cuộn trang mượt về đầu thay vì nhảy đột ngột. Nút có thuộc tính aria-label nên trình đọc màn hình vẫn hiểu đây là nút quay lại đầu trang.

Kiểm tra nút quay lại đầu trang

Bạn không cần gắn thêm gì trong Elementor vì code tự chèn nút vào mọi trang. Mở một trang dài trên site, cuộn xuống quá nửa trang sẽ thấy nút tròn màu xanh navy với mũi tên trắng hiện ra ở góc phải dưới, bấm vào thì trang cuộn mượt về đầu. Cuộn ngược lên gần đầu trang thì nút tự biến mất, không che nội dung.

Lưu ý khi dùng

Con số 500 trong code là độ sâu cuộn để nút hiện ra, bạn đổi thành 300 nếu muốn nút hiện sớm hơn hoặc 800 nếu muốn chỉ hiện khi khách đã cuộn khá sâu. Màu nền #1A1B6B bạn đổi cho khớp màu thương hiệu của site mình. Nếu theme bạn đang dùng đã có sẵn nút quay lại đầu trang (Flatsome có sẵn nút này) thì đừng dùng thêm code này, vì trang sẽ hiện hai nút chồng nhau — code này chỉ dành cho trang dựng bằng Elementor với theme chưa có sẵn nút. Tính năng này đi chung với bài code thêm hiệu ứng parallax cho ảnh nền section trong Elementor là thành combo giúp trang dài cuộn mượt và dễ điều hướng hơn.

Kết luận

Vậy là chỉ với 1 đoạn code ngắn bạn đã thêm nút quay lại đầu trang trong Elementor mà không cần cài thêm plugin rồi nhé. Tính năng này đi chung với bài code thêm hiệu ứng parallax cho ảnh nền section trong Elementor và bài code thêm hiệu ứng hiện dần khi cuộn cho widget trong Elementor là thành bộ tiện ích cuộn trang cho site dựng bằng Elementor.

Nếu cần mình kèm 1-1 về Elementor thì cứ liên hệ mình nhé.