Sticky "back to top"

by Phil Everton

HTML

<div id="wrap">

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

</div>

CSS

#wrap {height:6000px; width:400px; margin:0 auto; background-color:#F90}
#top-link  {display:none; position:fixed; left:50%; margin-left:200px; bottom:2px; color:#000; font-weight:bold; text-decoration:none; border:1px solid #CCC; background:#FFF; padding:10px; opacity:0.8 }

JavaScript

// scroll to top thing
//plugin
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);
  });
});