Tạo nút lên đầu trang phong cách tên lửa

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 vui lòng tính thêm khoản phí 1.000.000₫, 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é!

Hướng dẫn thêm nút lên đầu trang back to top cho blogspot theo phong cách tên lửa đẹp mắt. Cách thêm Tạo nút lên đầu trang phong cách tên lửa như sau.

Các bạn copy toàn bộ code bên dưới dán trước thẻ đóng </body> và lưu lại là xong.

Copy

<style>
  /*<![CDATA[*/
.backtop{position:fixed;bottom:80px;z-index:99;top:auto;width:50px;height:50px;line-height:50px;font-size:19px;font-weight:bold;text-align:center;display:inline-block;border:solid 1px transparent;border-radius:50%;text-decoration:none;transition:opacity 0.2s ease-out;opacity:0 !important;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden}.backtop .fa{font-size:22px;color:#fff;font-weight:bold}.backtop:hover{border-color:#e62901;background:#fff}.backtop:hover .fa{color:#e62901}.backtop.pc{position:absolute;right:15px;width:auto;height:auto;background:none;bottom:auto;font-family:"Montserrat",sans-serif;font-size:14px;color:#ff6ea4 !important;line-height:unset;top:28px}@media (max-width: 767px){.backtop.pc{display:none !important}}.backtop.pc .fa{color:#ff6ea4;font-size:14px;padding-left:5px}.backtop.pc:hover .fa{color:#e62901}.backtop.show{opacity:1 !important}@media (min-width: 1441px){.backtop{right:15px;bottom:80px}.phone_backtotop{bottom:30px !important;left:50px}}@media (min-width: 1200px) and (max-width: 1440px){.backtop{right:15px;bottom:40px}.phone_backtotop{bottom:48% !important;left:30px}}@media (min-width: 768px) and (max-width: 1199px){.backtop{right:25px;bottom:40px}.phone_backtotop{bottom:48% !important;left:30px}}@media (max-width: 767px){.backtop{right:11%;bottom:20px}
  /*]]>*/
</style>
<a class='backtop' href='#' title='Lên đầu trang'><img alt='Lên đầu trang' src='https://lh3.googleusercontent.com/-rG1VH-3_xw4/YtEdpRir2SI/AAAAAAAAJ3A/va9qOYWIUFUNgPg3fvn1yQR8KxCmQFnwgCNcBGAsYHQ/h120/backtop.webp'/></a>
<script>
//<![CDATA[
if ($('.backtop').length) {
  var scrollTrigger = 200,
    backToTop = function() {
      var scrollTop = $(window).scrollTop();
      if (scrollTop > scrollTrigger) {
        $('.backtop').addClass('show');
      } else {
        $('.backtop').removeClass('show');
      }
    };
  backToTop();
  $(window).on('scroll', function() {
    backToTop();
  });
  $('.backtop').on('click', function(e) {
    e.preventDefault();
    $('html,body').animate({
      scrollTop: 0
    }, 700);
  });
}
//]]>
</script>

Bài viết: Tạo nút lên đầu trang phong cách tên lửa đượ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