Tạo nút Back to Top với hiệu ứng từ jQuery

(iCOM) Một trong những tiện ích quan trọng và phổ biến mà không có blog nào thiếu đó là tính năng "Back to top". Nhờ đó, người đọc sẽ nhanh chóng quay trở lại đầu trang mà không phải cuộn chuột nhiều lần. Hôm nay iCOM xin giới thiệu bài viết ngắn, chia sẻ từ blog Noct.

Chèn đoạn code sau phía trên </body> trong template:


<style type='text/css'>
#bttop{border:1px solid #4adcff;background:#24bde2;text-align:center;padding:5px;position:fixed;bottom:35px;right:10px;cursor:pointer;display:none;color:#fff;font-size:11px;font-weight:900;}
#bttop:hover{border:1px solid #ffa789;background:#ff6734;}
</style>
<div id='bttop'>BACK TO TOP</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<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},800);});});</script>

Nhấn nút Lưu mẫu. Done.

* Lưu ý: Tiện ích sẽ không hoạt động hoặc gây là lỗi ở slide nếu blog của bạn có sử dụng slide banner sử dụng jQuery.

- iCOM,
i and computer

Nguồn: Noct blog