KIẾN THỨC WEBSITE
Tạo nút Scroll Back To Top cho website
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 Web360do.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
Hi! hôm nay nhân dịp Web360do.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à đây là code, các bạn sẵn chèn vào header hoặc footer 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 buttonwindow.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 documentfunction topFunction() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0;}</script>
Chúc các bạn thành công!
Tác giả bài viết: Trần Minh Tuấn
Bạn cần tư vấn thiết kế website Nukeviet?Vui lòng liên hệ để được tư vấn!
0903.177.877 - 0988 80 13 80 ĐĂNG KÝ NGAY
Tags: Scroll Back To Top
Những tin mới hơn
Những tin cũ hơn
