Đã bao giờ bạn thấy một trang web có một nút trở về đầu trang, đây là một chức năng tuyệt vời khi bạn có một trang dài và bạn muốn làm một chức năng để có thể trở lại đầu trang một cách dễ dàng. Trong bài viết này mình sẽ hướng dẩn bạn cách để làm một nút back to top trong wordpress sử dụng jQuery.
Tại sao trang web của bạn lại cần chức năng back to top?
Khi một người đọc bài viết của bạn, họ bắt buột phải duy chuyển dần xuống dưới để có thề đọc nội dung tiếp theo và khi kết thúc bài viết họ muốn trở về đầu trang để xem những gì khác trên trang web của bạn. Đầu tiên bạn có thể thêm một đoạn code này để trở về đầu trang mà không cần jquery:
[html]
<a href="#" title="Back to top">^Top</a>
[/html]
Nhưng nó đưa bạn trở về đầu trang một cách nhanh chóng và không mượt mà. Chức năng back to top dưới đây sẽ cải thiện điều này tạo cảm giác trơn tru hơn cho người dùng.
Thêm nút back to top cho wordpress
Đầu tiên hãy mở file footer.php vào thêm đoạn code này trước thẻ đóng /body:
[php]
<script type="text/javascript">
$(document).ready(function() {
$('body').append('<div id="backtotop">^Top</div>');
$(window).scroll(function() {
if($(window).scrollTop() >200) {
$('#backtotop').fadeIn();
} else {
$('#backtotop').fadeOut();
}
});
$('#backtotop').click(function() {
$('html, body').animate({scrollTop:0},500);
});
});</script>
[/php]
Tiếp theo để cho nút back to top của chúng ta trở nên đẹp hơn hãy thêm đoạn code này vào file style.css.
[css]
#backtotop {
width: 50px;
height: 50px;
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
font-weight: bold;
}
[/css]
Trong đoạn css trên chúng ta đã cố định div với id là backtotop cách bên phải 10px và cách dưới 10px như button top của sacmauweb.
Huy vọng trong bài viết này sẽ giúp bạn bạn tạo ra một nút back to top cho riêng mình.
Cảm ơn bài viết, mình đang tìm nội dung này