Cách tạo nút Scroll Up – Nút Cuộn lên cho website

Bài viết hôm nay mình xin chia sẻ với các bạn cach tạo nút Scroll Up hay còn gọi là nút về đầu trang cho Website. Nó giúp người xem trở về đầu trang một cách nhanh chóng đỡ tốn thời gian hơn. Với nút Scroll Up này sẽ tạo cho người xem trải nghiệm tốt hơn với Website của bạn.

Bây giờ các bạn hãy làm theo các bước dưới đây :

Bước 1 : Chèn mã css cho nút Scroll -up trong File style.css
Bạn mở file style.css trong bộ mã nguồn website và chèn đoạn mã dưới đây
#scroll-up {
display: none;
position: fixed;
width: 40px;
height: 40px;
bottom: 20px;
right: 20px;
background-color: #e54e53;
color: #fff;
line-height: 40px;
text-decoration: none;
text-align: center;
-webkit-border-radius: 4px;
border-radius: 4px;
}
#scroll-up .ion-angle-up:before {
font-size: 18px;
}
#scroll-up {
bottom: 30px;
right: 30px;
}

Bước 2 : Hãy tạo file Java có tê Scroll -up.js
Hãy tạo file ScrollUp.js và chèn đoạn mã jQuery bên dưới đây.
/**
* Scroll Up
*/
jQuery(document).ready(function(){
jQuery("#scroll-up").hide();
jQuery(function () {
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 800) {
jQuery('#scroll-up').fadeIn();
} else {
jQuery('#scroll-up').fadeOut();
}
});
jQuery('a#scroll-up').click(function () {
jQuery('body,html').animate({
scrollTop: 0
}, 600);
return false;
});
});
});

Sau khi chèn xong hãy chèn mã xong hãy khai báo file Scroll -up.js để website của bạn có thể sử dụng.
Bước 3 : Chèn nút Scroll -up trong File  footer.php
Bạn mở file footer.php trong bộ mã nguồn website và chèn đoạn mã này trước thẻ đóng </body>
<?php if ( get_theme_mod('nut_scroll_up') ) { ?>
<a href="#masthead" id="scroll-up"><span class="icon-arrow-up"></span></a>
<?php } ?>

Vậy là cách tạo một nút Cuộn lên cho website đến đây là kết thúc, bạn hãy mở website và kiểm tra nó nhé.
Việc bạn phát triển Blog của bạn nhằm tạo tính thân thiện cho người xem quay lại blog của bạn là một điều rất quan trọng. Nó ảnh hưởng tới vị trí website của bạn và doanh thu mà bạn nhận được từ Blog vì vậy hãy bạn hãy cố gắng tạo ra những tốt để lôi kéo người dùng. Chúc các bạn thành công.