Back to top button on web page - Using ( html - Javascript - css )

Description

How to create a back to top button with smooth scrolling
on a web page , Using ( html - Javascript - css ) ,
the button appears when scrolling down
and disappears when scrolling up .

Button Styles

^

Normal Style

^

Hover Style

Code ( html - Javascript - css ) 


                     <!-- Back to top of webpage button --> 
                    
                    <style>
                    
                    html {
                    scroll-behavior: smooth;
                    }
                    
                    #BackToTop {
                    text-align: center;
                    position: fixed;
                    bottom: 105px;
                    right: 35px;
                    display: none;
                    height: 35px;
                    width: 28px;
                    cursor: pointer;
                    z-index: 1000;
                    border-radius: 20%;
                    font-size: 23px;
                    font-weight: bolder;
                    border: solid #3405cc 3px;
                    color: rgb(22, 5, 149);
                    background-color: #ffffff;
                    font-family: 'Poppins', sans-serif;
                    }
                    
                    #BackToTop:hover{
                    font-size: 27px;
                    border: solid #05b814 3px;
                    }
                    
                    </style>
                    
                    <a id="BackToTop" title="Back To Top" href="#" >^</a>
                    
                    <script>
                    
                    let TOP =document.getElementById("BackToTop");
                    window.onscroll=function(){
                    if(document.body.scrollTop >20 || document.documentElement.scrollTop >20)
                    {
                    TOP.style.display="block";
                    }
                    else{
                    TOP.style.display="none";}
                    }
                              
                    </script>

Video

Watch video on YouTube…

Previous : Null Coalescing Operator ( ?? ) - PHP …

Next : Network data on the hosting server - PHP …

^