Here i am explaining how to add javascript - jQuery fading "Back To Top" link
We need to style and position it. Here I’m setting its position to fixed and adding the image of "Back To Top". I also added the Fade In and Fade Out effect.
#toTop
{
position: fixed;
bottom: 50px;
right: 30px;
width: 180px;
height:100px;
padding: 5px;
cursor:pointer;
display: none;
}
</style>
Script
//Add This Jquery CDN
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js">
</script>
</script>
//A Simple FadeIn and FadeOut Effect Back to top
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() != 0) {
$("#toTop").fadeIn();
}
else {
$("#toTop").fadeOut();
}
});
$('#toTop').click(function() {
$('body,html').animate({ scrollTop: 0 }, 800);
});
});
</script>
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() != 0) {
$("#toTop").fadeIn();
}
else {
$("#toTop").fadeOut();
}
});
$('#toTop').click(function() {
$('body,html').animate({ scrollTop: 0 }, 800);
});
});
</script>
CSS
<style type="text/css">#toTop
{
position: fixed;
bottom: 50px;
right: 30px;
width: 180px;
height:100px;
padding: 5px;
cursor:pointer;
display: none;
}
</style>
HTML
//This is the Fixed div
<div id="toTop">
<img src="images/BackToTopArrow.png" style="width: 250px;
height:100px;" alt="back to top" title="back to top" />
</div>
height:100px;" alt="back to top" title="back to top" />
</div>
If you have any query feel free to comment it will be appriciated :)