Sticky "back to top"

by Akram kamal

HTML

<div id="wrapper">
    
   <div id="content">
       Lorem ipsum and stuff.
   </div>

   <a href="#top" id="top-link">Back to Top</a>


</div>

CSS

/* for testing purposes, in real world it's filled with crap and wider*/
#wrapper {height:3000px; width:300px; margin:0 auto; background-color:#000}

#top-link  {display:none; position:fixed; right:40px; bottom:2px; color:#000; font-weight:bold; text-decoration:none; border:1px solid #CCC; background:#FFF; padding:10px; opacity:0.8 }

JavaScript

jQuery.fn.topLink = function(settings) {
  settings = jQuery.extend({
    min: 1,
    fadeSpeed: 100
  }, settings);
  return this.each(function() {
    //listen for scroll
    var el = jQuery(this);
    el.hide(); //in case the user forgot
    jQuery(window).scroll(function() {
      if(jQuery(window).scrollTop() >= settings.min)
      {
        el.fadeIn(settings.fadeSpeed);
      }
      else
      {
        el.fadeOut(settings.fadeSpeed);
      }
    });
  });
};

//usage w/ smoothscroll
jQuery(document).ready(function() {
  //set the link
  jQuery('#top-link').topLink({
    min: 500,
    fadeSpeed: 100
  });
  //smoothscroll
  jQuery('#top-link').click(function(r) {    
    jQuery("html, body").animate({ scrollTop: 0 }, 300);
  });
});