Chia Sẻ Nút Lên Đầu Trang (Back to top) - Scroll top Cho Blogspot đẹp

 Chào bạn! có phải bạn đang tĩm mã code Back to top (lên đầu trang) cho blogger (blogspot) đẹp mà bất cứ một website blog nào đều cần phải có.

Nếu bạn để ý thì tất cả các website blog mà mình sử dụng đều có Back to top để giúp chúng ta lên đầu trang một cách dễ dàng.

Nút Back to top cho website blogspot

Cách thực hiện

- Bước 1: Bạn thêm CSS này trong thẻ </b:skin> hoặc trong thẻ </style>

.scroll--top{background:#00aeef;position:fixed;bottom:10%;right:20px;width:40px;height:40px;z-index:20;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;justify-content:center;border-radius:50%;border:1px solid #00aeef;transition:opacity 400ms ease 0ms}

.scroll--top:not(.show){opacity:0}

.scroll--top.show{opacity:1}

.scroll--top:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'%3E%3Cpath fill='%23fff' d='M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z'%3E%3C/path%3E%3C/svg%3E");background-size:100%;content:"";width:21px;height:21px;display:inline-block;vertical-align:middle}

.scroll--top:focus{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);border-color:#03a9f4;outline:none!important}

@media(min-width:1025px){.scroll--top:hover{cursor:pointer}}

- Bước 2: Thêm HTML trước thẻ đóng </body>

<div aria-label='Back to Top' class='scroll--top' cond='!data:blog.isMobileRequest' role='button' tabindex='0'/>

<script>//<![CDATA[

  const scrollTop=document.querySelector('.scroll--top')

  window.addEventListener('scroll',function(){

    if(this.pageYOffset==0)scrollTop.classList.remove('show')

    else scrollTop.classList.add('show')

  })

  scrollTop.addEventListener('click',function(){

    window.scrollTo({top:0,behavior:'smooth'})

  })

//]]></script>

- Bước 3: Lưu và xem thanh quả

* Như vậy là mình đã chia sẻ xong cho các bạn một tiện ích rất cần thiết cho một website blog, nếu như bạn có thắc mắc gì thì vui lòng liên hệ với VeoSpot.net nhé!

Chúc bạn thành công!

No Copyright © A Vèo
Trên đây là bài viết Chia Sẻ Nút Lên Đầu Trang (Back to top) - Scroll top Cho Blogspot đẹp Nếu bạn cảm thấy bài viết chưa đầy đủ hoặc không được như bạn mong đợi thì hãy để lời góp ý của bạn dưới phần comments nhé!
VeoSpot.net có sinh nhật vào 9 tháng 3

2 Comments

Post template