Thứ Năm, ngày 24 tháng 11 năm 2016

Share CODE Back To Top với hiệu ứng từ jQuery siêu nhẹ

Hôm nay lướt web thấy 1 code hiệu ứng trượt lên đầu trang Back to Top Button khá đẹp mà lại rất nhẹ, sử dụng hiệu ứng trượt từ jQuery, và đặc biệt là nó ẩn/hiện khi cần thiết. Với những trang web có phần nội dung khá dài thì nút Back to Top này giúp người đọc tiết kiệm thời gian khi phải rê chuột lên trên cùng của trang. Đem về áp dụng thử trên Blogspot, thế là có bài đăng mới. 





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>

chỉ số 800 bên trên chính là tốc độ trượt các bạn có thể thay đổi theo ý mình
nếu website của ai đã có thư viện jquery thì bỏ bớt phần script jquery 1.3.2 đi cho nhẹ đỡ

Hi vọng các bạn thích!