Tạo nút lên đầu trang web không cần plugin

Hiện tại đa số theme đã có chức năng back to top (nút lên đầu trang) và cũng khá nhiều plugin hỗ trợ việc này tuy nhiên vẫn còn 1 số theme thiếu chức năng này nên đây là bài viết chia sẽ code với chức năng backup to top đơn giản và dễ áp dụng, bạn có thể sử dụng đoạn code ngắn dưới đây để tạo chức năng back to top đẹp mắt.

Các bước để thêm nút lên đầu trang web không cần plugin

Bước 1: Bạn thêm code dưới đây vào file functions.php nếu bạn không biết file functions là gì bạn có thể xem qua bài viết này nhé.

Code sử dụng Jquery

function vutruso_add_back_to_top_button() {
    echo '<div id="backToTopBtn"><span><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 36 36" style=" position: absolute; height: 20px; top: 8px; left: 0px; "><path fill="#fff" d="M25.711 10.867L18.779.652c-.602-.885-1.558-.867-2.127.037l-6.39 10.141c-.569.904-.181 1.644.865 1.644H13V16a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-3.525h1.898c1.047 0 1.414-.723.813-1.608zM3.651 23.575H1.438c-.975 0-1.381-.712-1.381-1.401c0-.71.508-1.399 1.381-1.399h7.469c.874 0 1.381.689 1.381 1.399c0 .69-.406 1.401-1.381 1.401H6.696v10.189c0 1.016-.649 1.584-1.522 1.584s-1.522-.568-1.522-1.584V23.575zM10.396 28c0-4.222 2.841-7.471 6.982-7.471c4.079 0 6.983 3.351 6.983 7.471c0 4.201-2.821 7.471-6.983 7.471c-4.121 0-6.982-3.27-6.982-7.471zm10.798 0c0-2.456-1.279-4.67-3.816-4.67s-3.816 2.214-3.816 4.67c0 2.476 1.239 4.668 3.816 4.668c2.578 0 3.816-2.192 3.816-4.668zm4.433-5.644c0-.954.569-1.582 1.585-1.582h3.591c2.985 0 5.197 1.947 5.197 4.851c0 2.963-2.293 4.811-5.074 4.811h-2.253v3.329c0 1.016-.649 1.584-1.521 1.584c-.874 0-1.524-.568-1.524-1.584V22.356zm3.046 5.4h2.071c1.277 0 2.089-.934 2.089-2.151c0-1.219-.812-2.152-2.089-2.152h-2.071v4.303z" style=" width: 40px; height: 40px; "></path></svg></span></div>';?>
<script>
(function($) {
    $(document).ready(function() {
        $(window).scroll(function() {
            if ($(this).scrollTop() > 100) {
                $('#backToTopBtn').fadeIn();
            } else {
                $('#backToTopBtn').fadeOut();
            }
        });

        $('#backToTopBtn').click(function() {
            $('html, body').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'vutruso_add_back_to_top_button');

Đoạn code trên sẽ có 1 file svg back to top và 1 đoạn code jquery xử lý sự kiện click để chạy lên top

Code sử dụng Vanilla JS

Nếu bạn không muốn sử dụng jquery có thể dùng phiên bản pure JavaScript như sau:

function vutruso_add_back_to_top_button() {
    echo '<div id="backToTopBtn"><span><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 36 36" style=" position: absolute; height: 20px; top: 8px; left: 0px; "><path fill="#fff" d="M25.711 10.867L18.779.652c-.602-.885-1.558-.867-2.127.037l-6.39 10.141c-.569.904-.181 1.644.865 1.644H13V16a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-3.525h1.898c1.047 0 1.414-.723.813-1.608zM3.651 23.575H1.438c-.975 0-1.381-.712-1.381-1.401c0-.71.508-1.399 1.381-1.399h7.469c.874 0 1.381.689 1.381 1.399c0 .69-.406 1.401-1.381 1.401H6.696v10.189c0 1.016-.649 1.584-1.522 1.584s-1.522-.568-1.522-1.584V23.575zM10.396 28c0-4.222 2.841-7.471 6.982-7.471c4.079 0 6.983 3.351 6.983 7.471c0 4.201-2.821 7.471-6.983 7.471c-4.121 0-6.982-3.27-6.982-7.471zm10.798 0c0-2.456-1.279-4.67-3.816-4.67s-3.816 2.214-3.816 4.67c0 2.476 1.239 4.668 3.816 4.668c2.578 0 3.816-2.192 3.816-4.668zm4.433-5.644c0-.954.569-1.582 1.585-1.582h3.591c2.985 0 5.197 1.947 5.197 4.851c0 2.963-2.293 4.811-5.074 4.811h-2.253v3.329c0 1.016-.649 1.584-1.521 1.584c-.874 0-1.524-.568-1.524-1.584V22.356zm3.046 5.4h2.071c1.277 0 2.089-.934 2.089-2.151c0-1.219-.812-2.152-2.089-2.152h-2.071v4.303z" style=" width: 40px; height: 40px; "></path></svg></span></div>';?>
<script>
    document.addEventListener('DOMContentLoaded', function() {
    var backToTopBtn = document.getElementById('backToTopBtn');
    
    window.addEventListener('scroll', function() {
        if (window.scrollY > 100) {
            backToTopBtn.style.display = 'block';
        } else {
            backToTopBtn.style.display = 'none';
        }
    });

    backToTopBtn.addEventListener('click', function(e) {
        e.preventDefault();
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });
});
</script>
<?php
}
add_action('wp_footer', 'vutruso_add_back_to_top_button');

Tiếp theo đó bạn thêm code css này vào file css nữa là xong. Nếu bạn không biết cách thêm css như thế nào có thể xem qua bài viết Thêm css vào WordPress như thế nào? nhé.

#backToTopBtn {
    display: none;
    position: fixed;
    bottom: 120px;
    left: 20px;
    background-color: #0073e6;
    color: #fff;
    border: none;
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
    font-size: 20px;
    width: 40px;
    height: 40px;
}

#backToTopBtn:hover {
   background-color: #005bb5;
}

#backToTopBtn svg {
    position: absolute;
    height: 20px;
    top: 8px;
    left: 0px;
}

Dòng code left: 20px; nghĩa là đang đặt nút lên đầu trang ở bên trái, nếu bạn muốn đặt bên phải thì sửa thành right: 20px; nhé.

Sau khi áp dụng code trên, khi bạn kéo chuột xuống dưới nút back to top sẽ hiện lên và tất nhiên khi bạn click vào nút đấy sẽ chạy lên đầu trang web :))

Demo nè

Ngoài ra, mình còn thấy 1 chức năng back to top với thanh tiến trình, bạn có thể xem tại https://codepen.io/ig_design/full/yrwgwO đây là html tĩnh bạn cũng có thể áp dụng cho website của mình nếu có kiến thức cơ bản, nếu bạn gặp khó khăn có thể liên hệ để được hỗ trợ miễn phí.