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

Để tạo điều kiện thuận lợi cho khách tham quan khi đọc xong bài có thể quay về đầu trang nhanh chóng, bạn phải tạo cho Blog một nút bấm phía dưới cuối trang, khi bấm vào nút này lập tức sẽ đưa khách "về đầu trang".

 

 

 

 Chèn đoạn code sau phía trên </body> trong template hoặc thêm tiện ích cũng được...

 

 CODE:

<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'>ĐẦU TRANG</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>

Các bạn có thể thay ĐẦU TRANG thành chữ khác hoặc bằng hình ảnh khác.

LINK TẢI

<img src="LINK TẢI">

Chúc các bạn thành công.............

Browse More Articles

Tweet

Written by Anonymous

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.