Ngày Thứ Sáu, 11 tháng 5, 2012 Blog của Báo Mới Hà Nội chia sẻ với bạn đọc bài viết Tạo nút Back to Top cho blogger với hiệu ứng từ jQuery
Chúc bạn xem tin tức vui vẻ !!
Hôm nay tình cờ ghé thăm Namkna Blog thì thấy một cái Back to Top Button khá đẹp, 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.
Demo
Chèn đoạn code sau phía trên thẻ </body> trong template:
<style type='text/css'>#bttop{text-align:center;padding:0px;position:fixed;bottom:10px;right:0px;cursor:pointer;display:none;color:#fff;font-size:11px;font-weight:900;}#bttop:hover{background:#ffffff;}</style><div id='bttop'><img alt='Smiley face' height='42' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZn95-XHXcmc2T5DzNtN89fJtKI6WjYTarJWseAOLBBe1PROoHwgnBtjcxVDno95XJKTZjThaipYl7G8aao5VaJ6qo8xaR_-xQNtelrOXZPqt1UOJJmgMk7Jt0tu3jVPfJWLounBDVW7iw/s1600/fleche-upload-icone-4297-48-namkna-blogspot-com.png' width='42'/></div><script src='http://tanchau123.googlecode.com/files/backtotop_jquery.txt' type='text/javascript'/><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},1000);});});</script>
Chúc các bạn thành công !!!

Không có nhận xét nào:
Đăng nhận xét