Hướng dẫn tạo back to top web blog
Hello mình sẽ hướng dẫn bạn tạn nút back to top cho web, blog , wordpess . Đối với wordpress bạn có thể dùng plugin Dynamic “To Top” Plugin bạn click để tải về cài đặt.
Khi cài đặt xong khi kéo xuống cuối web bạn sẽ thấy như thế này .
Plugin này giúp bạn tạo back to top web rất dễ dàng và có thể lụa chọn màu sắc co nút back to top web Ở option, mặc định sẽ không có nút trên mobile, bạn có thể chọn trên mobile bằng việc uncheck nút trên mobile.
Tiếp theo nếu bạn không muốn dùng plugin cho nhẹ web,việc dùng css, và javascript bằng tay có thể dùng cho website và blogspot
Hướng dẫn tạo back to top web bằng code tay
bước 1: có lẽ web nào mặc định web nào cũng load sẵn jquery rồi nhỉ nếu chưa mình sẽ hướng dẫn inlcude luôn trong bước 2 ,
bươc 2: dùng code jquery trong web:
<script type="text/javascript">
jQuery(function($) {
$(window).scroll(function() {
if($(this).scrollTop() >= 500) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
</script>
($(this).scrollTop() >= 500 ở đây khi bạn cuộn màn hình với chiều cao >= 500 thì nút sẽ xuất hiện , bạn có the sửa theo ý bạn.javascript này bạn có thể đặt bất kì đâu trong web.
Tiếp theo bạn thêm html và css cho nút back to top
bước 3: html và css cho nút back to top trong web ,blog
bạn sẽ thêm những dòng code này
<div id="toTop"></div>
#toTop {
width:25px;
height:25px;
border:1px solid #ccc;
background:url(img/top.png) no-repeat;
padding:5px;
position:fixed; /* this is the magic */
bottom:30px; /* together with this to put the div at the bottom*/
right:10px;
cursor:pointer;
display:none;
}
Ở cuối footer bạn thêm html , trong css bạn thêm css .trong css background bạn dùng hình cho nút back to top web.
bạn có thể xem chi tiết hướng dẫn tạo nút back to top cho blogspot tại bài viết Tạo thêm nút back to top cho blogspot với bài viết 10 jQuery ‘Back to Top’ link Solutions for Websites
Cảm ơn bạn đã xem bài viết tạo back to top web tại website sonweb.net
