Hola!
Casualmente, en mi web tengo algo como lo que pides, a ver si encuentro todo el código...
Coloca ésto debajo de <body>
Código HTML:
<a href="#cielo" class="topLink" id="scroll-up" style="display: none; z-index: 100; "></a>
Esto en tu archivo JS
Código:
$(window).scroll(function(){
if (window.pageYOffset >= 1200) {
$('#scroll-up:not(:visible)').fadeIn();
} else {
$('#scroll-up:visible').fadeOut();
}
});
$(document).ready(function() {
$("a.topLink").click(function() {
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top + "px"
}, {
duration: 500,
easing: "swing"
});
return false;
});
});
Y ésto en tu CSS:
Código HTML:
#scroll-up {
position: fixed;
display: none;
top: 10px;
right: 10px;
width: 40px;
height: 40px;
background: transparent url(RUTA-DE-IMAGEN) top left no-repeat;
opacity: 0.5;
}
#scroll-up:hover {
opacity: 0.7;
}
Donde dice "RUTA-DE-IMAGEN, coloca la ruta de la imagen que quieras que aparezca.
Puedes ajustar a qué altura aparecerá, modificando el 1200 por más o menos, en el JS.
Coloca el id="cielo" al <body>.
Así: <body id="cielo">
Demo: http://taringra.net/protocolo/
Saludos!