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

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 thêm: Cải thiện tốc độ tải trang trong blogspot với thẻ liên kết preconnect

Nút Back to Top hiển thị dưới góc phải trang web

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ẻ div này

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

Đọc thêm: Sử dụng CSS background thay thế cho liên kết SVG trực tiếp để giảm kích thước DOM

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

Đọc thêm: Làm thế nào để tối ưu css trong blogspot?

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.