Khi cuộn trang xuống thì nút back to top mới xuất hiện và javascript sẽ làm cho hiệu ứng thêm sinh động hơn
Trước tiên bạn đăng nhập vào blogger vào phần Mẫu và chọn chỉnh sửa HTML
Tiếp theo bạn đặt đoạn code này vào trong cặp thẻ <body> ...</body>, cứ kéo chuột xuống tít cuối cùng là sẽ thấy thôi không cần Crtl F
<div id="bttop"> <i class="fa fa-chevron-up" title="Back to top"></i></div> <script type="text/javascript">$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop').fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').animate({scrollTop:0},400);});}); </script> <a class="btbottom" href="javascript:window.scrollTo(0,999999)" title="Back to bottom"><i class="fa fa-chevron-down"></i></a>
Thêm 1 ít css cho sinh động. Crtl F và tìm tới thẻ đóng ]]></b:skin> và đặt đoạn code này trước nó
#bttop{background:#ff4d11;text-align:center;padding:13px;position:fixed;bottom:50%;right:0px;cursor:pointer;display:none;color:#fff;font-size:15px;font-weight:900} #bttop:hover{background:#24bde2;border-bottom:4px solid #3399FF} .btbottom{position:fixed;z-index:3;bottom:43%;right:0;background:#ff4d11;padding:12px 13px;color:#fff!important;font-size:15px} .btbottom:hover{background:#24bde2;border-top:4px solid #3399FF}
Cuối cùng là lưu mẫu và xem kết quả. bạn có thể tùy chỉnh css theo ý của bạn nhé và lưu ý muốn thay đổi tốc độ khi lên đầu trang thì chỉnh giá trị màu đỏ này animate({scrollTop:0},400);});});
