Tạo nút Scroll Back To Top cho website

1 năm trước, Code website hay dùng, 115 Lượt xem

Bạn muốn làm cho website mình sinh động hơn, tăng tương tác người dùng hơn với Scroll Back To Top, thì đây là bài viết dành cho bạn!

Hi! hôm nay nhân dịp netweb.vn làm cho khách hàng cái nút back to top tiện hướng dẫn mọi người code này luôn

Xem demo ở đây

Và sau đây là code, các bạn sẵn chèn vào header của trang là xong nhé!

 

<button onclick="topFunction()" id="myBtn" title="Go to top">TOP</button>

<style>

#myBtn {
    display: none;
    position: fixed;
    bottom: 10px;
    right: 43px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: red;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}
</style>


<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}
</script>

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

 

Bình luận trên facebook netweb.vn