Posted By

leobetosouza on 09/10/11

Tagged

Versions (?)

Last Edited at 09/10/11 07:44am

Statistics

Viewed 1193 times

Favorited by 1 user(s)

Related snippets

Create a dynamic \"Link to top of page\" with fade and positioned at some pixels of bottom when scrolls to this position

/ 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;
}

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"
					});
				}
 
			});
		})();
	}
});