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!
Nếu muốn thẩm mỹ hơn , thay bằng hình ảnh cũng dc (h)
ReplyDelete(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 :>)
Deletelàm sao tạo nút quay lại trang trước ak
ReplyDelete