• Tạo nút scroll Back to top bằng script và css

Tạo nút scroll Back to top bằng script và css

AE muốn làm cho web/wapsite 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 AE.

Demo chính là wap mình

Mô tả: Khi cuộn trang web/wap xuống sẽ xuất hiện nút Back to top ở góc dưới bên phải màn hình.

Để tạo nút back to top AE chỉ cần copy & paste code sau vào header là OK:

<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 thành công!