Hung Pro VN ™: [Blogger] Cài Đặt Back To Top

Chào mọi người, bài viết này mình chia sẽ đến mọi người một tiện ích khá thú vị cho blogger, đó là back to top lên trên cùng cho giao diện hiện tại bạn đang sữ dụng.

Chúng ta bắt đầu nhé.

Bước 1: mọi người thêm đoạn code Css bên dưới vào trong thẻ <![CDATA[/*.

.backtotop{display:none}.backtotop{position:fixed;bottom:50px;right:0;cursor:pointer;font-weight:bold;box-shadow:-5px 5px rgba(0,0,0,.1);padding:10px;background-color:#fff;opacity:.6}.backtotop span{background-image:url(https://holy-poetry-9930.toihung.workers.dev/);background-position:0 -272px;background-repeat:no-repeat;height:25px;width:22px;display:inline-block;vertical-align:middle;margin-right:5px }.backtotop:hover{opacity:1}

Bước 2: Thêm đoạn code bên dưới vào trên thẻ </body>.

 <div class='backtotop hide'><span/>Top</div>
<script type='text/javascript'>
$(function(){$(window).scroll(function(){$(this).scrollTop()&gt;100?$(&quot;.backtotop&quot;).fadeIn():$(&quot;.backtotop&quot;).fadeOut()}),$(&quot;.backtotop&quot;).click(function(){return $(&quot;html,body&quot;).animate({scrollTop:0},800),!1})});
</script>

Bước cuối cùng là mọi người lưu lại và tận hưởng kết quả.

 
Chúc mọi người thành công. Và xem demo tại bài viết này.

 

Top

Theo AnhTraiNang.Com https://www.anhtrainang.com/2020/07/cai-dat-nut-back-to-top-don-gian-tren-blog.html