As a newcomer, I am trying to replicate a unique "back to top" effect that caught my eye on another website. Instead of the traditional fade-in approach when scrolling down, the "back to top" image in question elegantly slides out from the bottom right corner of the screen. Moreover, I would like to swap out the current button with an image, but sadly my HTML skills are letting me down in this regard. Any assistance offered will be highly appreciated.
<a href="javascript:void(0);" id="scroll" title="Scroll to Top" <img src="images/logo_bluebird_90_cc.png" style="display: none;">Top<span></span></a>
#scroll {
position:fixed;
right:10px;
bottom:10px;
cursor:pointer;
width:50px;
height:50px;
background-color:#3498db;
text-indent:-9999px;
display:none;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
#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)";
}
$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 300){
$('#scroll').fadeIn();
}else{
$('#scroll').fadeOut();
}
});
$('#scroll').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});