Advanced Search

Return to Snippet

Revision: 50989
at September 10, 2011 08:22 by leobetosouza
Updated Code 
$(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"
					});
				}
			
			});
		})();
	}
});

Revision: 50988
at September 10, 2011 07:44 by leobetosouza
Initial Code 
if(!Modernizr.touch){
		(function(){
			var $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");
			
			$(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 < 340){
					$top_link.css({
						position:"absolute",
						bottom:"340px"
					});
				}else{
					$top_link.css({
						position:"fixed",
						bottom:0
					});
				}
			
			});
		})();
	}
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

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

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

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

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
javascript, jquery

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
jQuery