Hầu hết trên tất cả các Template, theme đều có sẵn nút Lên đầu trang/back to top.Lợi ích của nó là giúp người đọc trở lên đầu trang nhanh chóng mà không cần kéo thanh cuộn.
Tuy nhiên một số template thì không có hoặc template tự thiết kế chưa có.
Nhấn lưu mẫu và xem kết quả.Bạn, LÊ XUÂN MỸ và người khác
Tuy nhiên một số template thì không có hoặc template tự thiết kế chưa có.
Cách thêm nút Lên đầu trang/Back to top :
Bước 1: Thêm đoạn Css này vào dưới thẻ ]]></b:skin>
/* Lên đầu trang */Bước 2: Tìm đến thẻ </body> và thêm code sau lên trên nó:
#scrolltotop{border-radius:2px;background:#00deff;text-align:center;line-height:40px;
-o-border-radius:2px;-ms-border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;
position:fixed;bottom:10px;right:0;cursor:pointer;display:none;color:#fff!important;
font-size:25px;width:100%;height:40px;margin-right:14px}key{border:1px solid gray;
font-size:1.2em;box-shadow:1px 0 1px 0 #eee,0 2px 0 2px #ccc,0 2px 0 3px #444;
-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;margin:2px 3px;
padding:1px 5px}.post-header-line-1 {overflow:hidden}
#scrolltotop{color: #000;width: 40px !important;}
<div id='scrolltotop'><i class='fa fa-angle-up'/></div><script type='text/javascript'>
$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0)
{$("#scrolltotop").fadeIn()}else{$("#scrolltotop").fadeOut()}});
$("#scrolltotop").click(function(){$("body,html").animate({scrollTop:0},
800)})});</script>
Nhấn lưu mẫu và xem kết quả.Bạn, LÊ XUÂN MỸ và người khác
Bình luận