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

Nếu chưa có kinh nghiệm về Blogspot đừng lo lắng mình có dịch vụ Cầm Tay Chỉ Việc, hãy gọi hoặc Zalo ngay cho mình: 097.1539.681 để được tư vấn và hỗ trợ nhanh nhất nhé!

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.

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 và 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.

Bài viết: Hướng dẫn tạo nút Back to top cho blogspot được viết bởi admin trang Giaodien.blog

Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.

Để lại nguồn có nghĩa là bạn tôn trọng tác giả.

Động lực để mình chia sẻ nhiều bài viết hay.

Tags: Blog