Floating Back to Top Button with Smooth Scroll using CSS & JQuey

floating-back-to-top-button-with-smooth-scroll-using-css-jquey.markdown

Floating Back to Top Button with Smooth Scroll using CSS & JQuey

This type of button is most useful when we have a large amount of content in a single page that time we need this type of button going at the top of the page. Using CSS and JQuery, We can built better interface and make designable button.

When page is scroll down, then button automatically display on the page and when click on button then page will scroll and move on top of the page. Using this button, we can back to the top of the screen without manually scrolling.

A Pen by Rohan Hapani on CodePen.

License.

index.html

<a href="#" id="scroll" style="display: none;"><span></span></a>
<p>Floating Back to Top Button with Smooth Scroll using CSS & JQuey</p>
<br/><br/><br/><br/><br/><br/><br/><br/>
<p>Floating Back to Top Button with Smooth Scroll using CSS & JQuey</p>
<br/><br/><br/><br/><br/><br/><br/><br/>
<p>Floating Back to Top Button with Smooth Scroll using CSS & JQuey</p>
<br/><br/><br/><br/><br/><br/><br/><br/>
<p>Floating Back to Top Button with Smooth Scroll using CSS & JQuey</p>
<br/><br/><br/><br/><br/><br/><br/><br/>
<p>Floating Back to Top Button with Smooth Scroll using CSS & JQuey</p>
<br/><br/><br/><br/><br/><br/><br/><br/>
<p>Floating Back to Top Button with Smooth Scroll using CSS & JQuey</p>
<br/><br/><br/><br/><br/><br/><br/><br/>
<p>Floating Back to Top Button with Smooth Scroll using CSS & JQuey</p>
<br/><br/><br/><br/><br/><br/><br/><br/>

script.js

$(document).ready(function(){ 
    $(window).scroll(function(){ 
        if ($(this).scrollTop() > 100) { 
            $('#scroll').fadeIn(); 
        } else { 
            $('#scroll').fadeOut(); 
        } 
    }); 
    $('#scroll').click(function(){ 
        $("html, body").animate({ scrollTop: 0 }, 600); 
        return false; 
    }); 
});

scripts

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

style.css

#scroll {
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    width:50px;
    height:50px;
    background-color:#3498db;
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:60px;
    -moz-border-radius:60px;
    border-radius:60px
}
#scroll span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#ffffff;
}
#scroll:hover {
    background-color:#e74c3c;
    opacity:1;filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}