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

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!

 

Tạo nút Scroll Back To Top cho website
4.5 (90%) 4 votes

Bình luận của bạn

Hãy trở thành người đầu tiên bình luận!

avatar
wpDiscuz