Thiết kế web chuyên nghiệp và uy tín cho doanh nghiệp

http://www.web360do.vn

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
Tạo nút Scroll Back To Top cho website

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>
top



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

Tác giả bài viết: Trần Minh Tuấn

logoBạn cần tư vấn thiết kế website Nukeviet?
Vui lòng liên hệ để được tư vấn!
0903.177.8770988 80 13 80  ĐĂNG KÝ NGAY
, . : 60