$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$('#toTop').fadeIn();
$('#toTop').css('left', $('#sidebar').offset().left);
} else {
$('#toTop').fadeOut();
}
});
$("#toTop").click(function() {
$('html, body').animate({
scrollTop : 0
}, 400);
return false;
});
});
<div id="main">main</div>
<div id="sidebar">sidebar</div>
<a id="toTop" href="#">TOP</a>
#main {height : 1500px; width: 400px; background-color:#53ffff; float: left;}
#sidebar {height : 500px; width: 200px; background-color:#ffff53;float: left;}
#toTop {
position: fixed;
bottom: 100px;
display: none;
z-index: 9999;
}
External resources loaded into this fiddle: