"So I would like the arrow-up div to visible(show("slow")) when not on top of the page"
I do that this way:
http://jsfiddle.net/wf_4/GubeC/
SCRIPT:
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
$('.back-top').fadeIn();
} else {
$('.back-top').fadeOut();
}
});
// scroll body to 0px on click
$('.back-top').click(function () {
$('body,html').animate({
scrollTop: 0
}, 1600);
return false;
});
});
CSS
.back-top {
width:25px;
height:25px;
background:#ff0000;
position:fixed;
bottom:68px;
right:5px;
display:none;
opacity:0.8;
}
HTML
<div class="back-top" title="Top of Page"></div>