Hướng dẫn tạo nút Back to top cho blogspot

Zalo 0971539681 Tư vấn & Hỗ trợ
Sau đây mình Hướng dẫn tạo nút Back to top cho blogspot cho trang web đơn giản, Back to top lên đầu trang giúp cho người dùng truy cập dễ dàng điều hướng lên đầu trang của bạn.

Hướng dẫn tạo nút Back to top cho blogspot
Thêm CSS trước thẻ đóng </b:skin>



.backtop{position:fixed;bottom:80px;right:40px;z-index:99;top:auto;width:50px;height:50px;line-height:50px;font-size:19px;font-weight:bold;text-align:center;display:inline-block;color:#fff;border-radius:5px;background:#000;text-decoration:none;opacity:0!important}
.backtop .icon-up{background-image:url(https://cdn.jsdelivr.net/gh/giaodienblog/cdn@1af99cd/i-up-arrow.svg);background-repeat:no-repeat;width:16px;height:16px;display:block;background-size:contain;position:absolute;bottom:18px;right:16px}
.backtop:hover{background:#ffb416}
.backtop.show{opacity:1!important}


Thêm HTML JS trước thẻ đóng </body>



<div class='backtop'><i class='icon-up'></i></div>
<script>
  //<![CDATA[
  $(window).scroll(function() {
    $(this).scrollTop() > 200 ? $('.backtop').addClass('show') : $('.backtop').removeClass('show')
  });
  $('.backtop').click(function() {
    return $("body,html").animate({
      scrollTop: 0
    }, 800), !1
  });
  //]]>
</script>

Các bạn lưu lại và kiểm tra kết quả trên trang blogspot của bạn. Lưu ý là blogspot của bạn phải sử dụng thư viện jQuery.

Nhận xét

×