Nút lên đầu trang hầu như trang web nào cũng có vì nó khá đơn giản chứ không phức tạp gì. Cơ chế của nó khi trang được cuộn xuống dưới nút Back to Top hiện ra còn khi lên đầu trang thì nút Back to Top sẽ ẩn đi. Ngoài ra khi click vào nút trang sẽ cuộn lên đầu.

Cách tạo nút Back to Top đơn giản cho blogspot

Cách tạo nút Back to Top đơn giản cho trang blogspot

Bước 1: Chèn thẻ div của nút trước thẻ đóng </body> trong theme

<div aria-label="Back to Top" class="scroll--top" role="button" tabindex="0"></div>

Bước 2: Chèn JavaScript ngay sau thẻ <head>

<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: Chèn CSS trong ]]></b:skin>

.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}}

Vâng chỉ đơn giản ba bước là bạn đã tạo được nút Back to Top đẹp cho trang blogspot của mình. Chúc bạn thành công.