Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save MedRedha/b320076ee92236009104a9d7385bb79d to your computer and use it in GitHub Desktop.
Save MedRedha/b320076ee92236009104a9d7385bb79d to your computer and use it in GitHub Desktop.
Floating Back to Top Button with Smooth Scroll using CSS & JQuey

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.

<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/>
$(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;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
#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)";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment