Header Ads Widget

Ticker

6/recent/ticker-posts

Thêm nút lên đầu trang/ Back to top cho Blogger/ Blogspot

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ó. 


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ó.



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 */

#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;}

Bước 2: Tìm đến thẻ </body> và thêm code sau lên trên nó:
<div id='scrolltotop'><i class='fa fa-angle-up'/></div><script type='text/javascript'>
$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0)
{$(&quot;#scrolltotop&quot;).fadeIn()}else{$(&quot;#scrolltotop&quot;).fadeOut()}});
$(&quot;#scrolltotop&quot;).click(function(){$(&quot;body,html&quot;).animate({scrollTop:0},
800)})});</script>


Nhấn lưu mẫu và xem kết quả.

Đăng nhận xét