Tạo nút Scroll Back To Top cho website
5 năm trước,
Code website hay dùng,
6818 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
Nội dung
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