Tạo nút cuộn về đầu trang - HaiDM

Dán đoạn code này vào footer.php của theme mà bạn đang sử dụng:


<span class="back-to-top shadow hidden" onclick="window.scrollTo({ top: 0, behavior: 'smooth' })"><img alt="to top" class="icon-to-top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrbi1Gund6vXy-2SProeLsoVGmkoU1QX_GCP0T6JeRfUGQN6AvVDG84RZoKgAs9I52ZgZxHjgyO14g7QXmeSM76iE6Rp90GIYWpnq1dgig-ZuOIKwU4dGtNtZ6XcishqvhSWZ3rQ5pESNZbVsovsOQMep3HnVeig2ZOwxaaXtex3v-pglIciWvQgTo3y_s/s1600/to-top.png" /></span>

Tiếp tục dán đoạn code này vào file footer.php:


<script>
jQuery(document).ready(function(){
    jQuery(window).scroll(function() {
        if (jQuery(document).scrollTop() > 50) {
            jQuery('.back-to-top').removeClass('hidden'); // cuộn trang xuống 50px thì mới hiện nút cuộn về đầu trang
        }
        else {
            jQuery('.back-to-top').addClass('hidden');
        }
    });
});
</script>

CSS lại cho đẹp và vị trí hiện là ở góc dưới bên phải, dán vào file css của theme, hoặc truy cập vào Admin » Giao diện » Sửa giao diện » CSS bổ sung dán đoạn code bên dưới đây:


.hidden {
	display: none !important;
}

.back-to-top {
    padding: 12px;
    right: 10px;
    bottom: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    z-index: 999;
    background: rgb(0,0,0, .6);
    position: fixed;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.back-to-top:hover {
    cursor: pointer;
}

.icon-to-top {
    filter: brightness(0) invert(1);
}

Kết quả:

Chúc các bạn thành công!