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

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.

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!