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
Save to your folder(s)

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


Copy this code and paste it in your HTML
  1. $(function(){
  2. if(!Modernizr.touch){
  3. (function(){
  4. var scrollTop = $(window).scrollTop(),
  5. scrollBottom = $(document).height() - $(window).height() - scrollTop,
  6. $top_link = $("<a/>").attr({href:"#top",id:"top_link",title:"Voltar ao topo"}).text("Voltar ao topo").click(function(e){
  7. e.preventDefault();
  8. $( ($.browser.webkit) ? "body" : "html" ).animate({scrollTop:0}, "slow");
  9. }).appendTo("body");
  10.  
  11. if(scrollTop < 200){
  12. $top_link.hide();
  13. }
  14. if(scrollBottom < 380){
  15. $top_link.css({
  16. position:"absolute",
  17. bottom:"400px"
  18. });
  19. }
  20.  
  21. $(window).scroll(function(){
  22. var scrollTop = $(window).scrollTop(),
  23. scrollBottom = $(document).height() - $(window).height() - scrollTop;
  24.  
  25. if(scrollTop > 200){
  26. $top_link.fadeIn("slow");
  27. }else{
  28. $top_link.fadeOut("slow");
  29. }
  30.  
  31. if(scrollBottom < 380){
  32. $top_link.css({
  33. position:"absolute",
  34. bottom:"400px"
  35. });
  36. }else{
  37. $top_link.css({
  38. position:"fixed",
  39. bottom:"20px"
  40. });
  41. }
  42.  
  43. });
  44. })();
  45. }
  46. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.