Best Scroll Back to Top button

Best Scroll Back to Top button
Best Scroll Back to Top button
Advertisement

Best Scroll Back to Top button in html for website in simple way. This button is used to go to the top when there is too much material we need to go to the top.

Those buttons usually float to the bottom corner of the sites and then click you back to the top of the page. It can be done by javascript.

HTML code for scroll back to top
<!DOCTYPE html>
<html>
    <head>
        <title>Made by deekway</title>
    </head>
    <body>
        
    <!--scroll button-->
     <div class="floating-btn"><img src"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQcJ7ufdPXZHvZA9bmfikO9LPygafBoNXQyIw&usqp=CAU"></div>
        
    
    <section class="section0">Scroll To Top Button scroll down</section>
    <section class="section1">section1</section>
    <section class="section2">Made by deekway</section>
    <section class="section3">section3</section>
    <section class="section4">section4</section>
    </body>
</html>
CSS for scroll back to top
 /* Created by deekway */

*{
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
  }
  section {
  height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Sans-Serif;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: 8px;
}


.section0{
    background: #eb4d4b;
}
.section1{
  background: #f0932b;
}
.section2{
    background: black;
    color:white;
}
.section3{
  background: #7ed6df;
}
.section4{
  background: #22a6b3;
}

/*scroll button*/

.floating-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color: salmon;
    color: #fff;
    transform: scale(0);
    transition: all .1s linear;
    display: flex;
    justify-content: center;
    align-items: center;
}

.floating-btn img{
    width:20px;
    height:20px;
}

Javascript for scroll back to top button
function init() {

    // DOM node
    const btn = document.querySelector(".floating-btn");
    
    // handle window scroll
    function handlScroll() {
        if (window.pageYOffset > 300) {
            btn.style.transform = "scale(1)";
        } else {
            btn.style.transform = "scale(0)";
        }
    }
    
    // attach scroll to window
    window.addEventListener("scroll", handlScroll);
    
    // handle reset scroll
    function scrollUp() {
        window.scrollTo(0, 0);
    }
    
    // reset window scroll
    btn.addEventListener("click", scrollUp);
}

// invoke init when DOM loaded
window.addEventListener("DOMContentLoaded", init);

LEAVE A REPLY

Please enter your comment!
Please enter your name here