/ Published in: jQuery
Changes 340px with the page footer height.
CSS:
#top_link{
position:fixed;
bottom:20px;
right:50%;
margin-right:-600px;
overflow:hidden;
text-indent:-9999px;
background:url(../img/top.png) no-repeat 0 0;
display:block;
width:54px;
height:54px;
}
CSS:
#top_link{
position:fixed;
bottom:20px;
right:50%;
margin-right:-600px;
overflow:hidden;
text-indent:-9999px;
background:url(../img/top.png) no-repeat 0 0;
display:block;
width:54px;
height:54px;
}
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
$(function(){ if(!Modernizr.touch){ (function(){ var scrollTop = $(window).scrollTop(), scrollBottom = $(document).height() - $(window).height() - scrollTop, $top_link = $("<a/>").attr({href:"#top",id:"top_link",title:"Voltar ao topo"}).text("Voltar ao topo").click(function(e){ e.preventDefault(); $( ($.browser.webkit) ? "body" : "html" ).animate({scrollTop:0}, "slow"); }).appendTo("body"); if(scrollTop < 200){ $top_link.hide(); } if(scrollBottom < 380){ $top_link.css({ position:"absolute", bottom:"400px" }); } $(window).scroll(function(){ var scrollTop = $(window).scrollTop(), scrollBottom = $(document).height() - $(window).height() - scrollTop; if(scrollTop > 200){ $top_link.fadeIn("slow"); }else{ $top_link.fadeOut("slow"); } if(scrollBottom < 380){ $top_link.css({ position:"absolute", bottom:"400px" }); }else{ $top_link.css({ position:"fixed", bottom:"20px" }); } }); })(); } });