Last week I released a snippet of code for MooTools that allowed you to fade in and out a "to the top" link on any page. Here's how to implement that functionality using jQuery.
The XHTML
<a href="#top" id="top-link">Top of Page</a>
A simple link.
The CSS
#top-link { display:none; position:fixed; right:5px; bottom:5px; color:green; font-weight:bold; text-decoration:none; border:1px solid green; background:Lightgreen; padding:10px; }
A little CSS for position and style.
The jQuery JavaScript
//plugin jQuery.fn.topLink = function(settings) { settings = jQuery.extend({ min: 1, fadeSpeed: 200 }, settings); return this.each(function() { //listen for scroll var el = $(this); el.hide(); //in case the user forgot $(window).scroll(function() { if($(window).scrollTop() >= settings.min) { el.fadeIn(settings.fadeSpeed); } else { el.fadeOut(settings.fadeSpeed); } }); }); }; //usage w/ smoothscroll $(document).ready(function() { //set the link $('#top-link').topLink({ min: 400, fadeSpeed: 500 }); //smoothscroll $('#top-link').click(function(e) { e.preventDefault(); $.scrollTo(0,300); }); });
You'll see that I've added jQuery's ScrollTo plugin to add some smoothness to the anchor.
Please note that this version doesn't work with Internet Explorer due to IE's lack of CSS "position:fixed" support. Here is a shotty attempt at IE support:
//plugin jQuery.fn.topLink = function(settings) { settings = jQuery.extend({ min: 1, fadeSpeed: 200, ieOffset: 50 }, settings); return this.each(function() { //listen for scroll var el = $(this); el.css('display','none'); //in case the user forgot $(window).scroll(function() { //stupid IE hack if(!jQuery.support.hrefNormalized) { el.css({ 'position': 'absolute', 'top': $(window).scrollTop() + $(window).height() - settings.ieOffset }); } if($(window).scrollTop() >= settings.min) { el.fadeIn(settings.fadeSpeed); } else { el.fadeOut(settings.fadeSpeed); } }); }); };
No comments :
Post a Comment