Tạo nút Back To Top cho Blog



Hôm nay là ngày chủ nhật, vào ghé thăm cái blog mới làm. Nhìn ngang ngó dọc vẫn thấy nó thiếu thiếu một cái gì đó. Đang lúc ăn cơm, chợt nghĩ đến cái Back To Top mà mình đã áp dụng cho mấy cái Blog kia, nên bây giờ áp dụng vào blog, tiện thể share luôn. Demo các bạn xem trên blog của mình.


  •  Như thường lệ, ta vào Mẫu >> Chỉnh sửa HTML
  • 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;line-height: 25px;}

#bttop:hover{border:1px solid #32cd32;background:#bada55;}

</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.
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).

Chúc thành công!



Responses

2 Respones to " Tạo nút Back To Top cho Blog "

VanLinhEx said...

Nếu muốn thẩm mỹ hơn , thay bằng hình ảnh cũng dc (h)


January 14, 2013 at 11:31 AM
Karl Carsten said...

(o) lúc đầu em định dùng ảnh nhưng thấy cái này khá đẹp nên giữ lại dùng. Bác cũng áp dụng đi :>)


January 14, 2013 at 6:37 PM

Post a Comment

FRIENDS

VanLinhEx Blog Duy Pham Blog BKAV giá rẻ Namkna Blog Đinh Công Thành ChinhTruc Blog VnZap! VnBlogExpress LaoDongBlog Thienhieu Vận chuyển nhà LuatIT Blog Kiếm tiền trên mạng Thế giới APKKiếm Tiền Trên Mạng GiangLe - Chia set phần mềm
Return to top of page Copyright © 2011 | Platinum Theme