Cách tạo nút Back to Top cho trang blogspot (Phương án 2)

Nút “Back to Top” là một thành phần quen thuộc, xuất hiện trên hầu hết các website bởi cách triển khai đơn giản nhưng mang lại hiệu quả rõ rệt cho trải nghiệm người dùng. Khi người dùng cuộn trang xuống phía dưới, nút sẽ tự động hiển thị; và khi quay trở lại đầu trang, nút sẽ ẩn đi. Chỉ với một cú nhấp chuột, trang web sẽ được cuộn mượt mà lên đầu, giúp người dùng tiết kiệm thời gian và thao tác một cách thuận tiện hơn. Cùng Son Jovis thực hiện ngay các bước làm ngay. (Đây là cách thứ 2 làm nút Back to Top mà Son Jovis đã chia sẻ)

Cách tạo nút Back to Top cho trang blogspot

Demo website: TẠI ĐÂY

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

<div aria-label='Back to Top' class='scroll--top' 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 2: Chèn đoạn mã CSS sau vào trước ]]></b:skin>

.scroll--top {

    background: #;

    position: fixed;

    bottom: 13px;

    right: 9px;

    width: 35px;

    height: 35px;

    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 #ea6405;

    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='%23ea6405' 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: 33px;

    height:27px;

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

Lưu lại và xem kết quả.

Xem thêm cách thứ 1 tại nút Back to Top: TẠI ĐÂY