Home 
Tạo nút Back To Top (trở về đầu trang) cho Blogspot. Tiện ích này rất hữu ích cho các trang có nội dung dài. 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.
Thêm đoạn code sau vào trước thẻ </body> (Để vào sau <head> cũng được nhưng nên để code cuối trang vì ta sẽ để load sau cùng):
<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>
Ghi chú:
- Ở giữa 2 thẻ <style type='text/css'> và </style> là đoạn css định hình dạng cho nút Back to Top, các bạn tùy chỉnh thoải mái.
- Trong code của bạn đã có thư viện jQuery của Google có thể xóa đoạn dưới.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
- Dòng code màu lam là thư viện Jquery, nếu có rồi thì các bạn nên xóa nó đi.
BACK TO TOP các bạn thay bằng gì cũng được (GO TOP chẳng hạn).
0 nhận xét:
Post a Comment