jQuery topLink Plugin
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);
}
});
});
};
Know of a better way to incorporate IE support? Share it!
Discussion
Be Heard!
Share your thoughts with fellow developers of all skill levels! I want to hear from you!
Hmm… I thought you can do el.hide() instead of el.css(‘display’,'none’)? :P
Wow, nice plugin, I think I might incorporate this into a website in the not so long future. And good luck with the submission to the JQuery website :)
@Lim Chee Aun: Good call! Updated.
If you use something like this:
body { overflow: hidden; }
div.content {
height: 100%;
overflow: auto;
}
shouldn’t work? I will have to try it :), nice article anyway
It shows up fine but when I click it, it doesn’t scroll. Do you know why this would be?
Hi David! I translate to Turkish and publish to my site. I hope you like it. Here is link -> http://www.kadirgunay.com/jquery-top-link-jquery-yukari-cik-baglantisi.html
And i added your link bottom of the article :)
Thank you, and see you
Kadir,
Nice job David !!
Hi All,
Nice plugin and really useful. I’ve got a fix for IE7 (need to test ie6 if you care about it)
Basically I added the last value in the full CSS below *height: 1.5%
For those who don’t know the hack. The * makes it an IE7 value only (you could use _ for ie6) and FFox ignores it. I don’t think its W3C standards though but it does the job.
#top-link {
display: none;
position:fixed;
right: 5px;
bottom: 5px;
color: #eeefea;
font-weight: bold;
text-decoration: none;
border: 2px solid #1d2835;
background: #222b3a;
padding: 6px 10px;
*height: 1.5%
}
As for t the problem of the full script not working. I had a hard time with it too. Copying and pasting the code doesn’t work for some reason so I downloaded the demo example and striped out what I needed and it worked. I hope this was usefull to someone.
i like it
nice one..surely goin 2 try my hands on it!!
Awesome script David! Implemented it on opensourcereleasefeed.com. Thanks!
I love the solution! Good work!
wow nice , i m going to use it on my blog
I noticed its not working with IE…is there a way to solve it i need it…!
Works for me!
Has anyone yet mentioned today that IE sucks?
David you do not cease to surprise :)
A really amazing idea David, thanks! I made a similar plugin inspired by yours,
nice work!
@Matt,
I saw your plugin, looks very good. Can you tell how to use it to scroll to any specific control, rather than to the top of the page.
In my case, I want to scroll to say my DIV named “header” : <div id=”header”> </div>
Thanks,
Pawan
Important thing for a longer post. Thanks. I will publish it in my Bangla blog Bangla Hacks.
Hey David,
Just wanted to add that this is a fantastic script, many thanks for producing it. I am implementing it slightly differently, without the fixed positioning, so no IE problems so far!
Many thanks again,
DanC
nice plugin..
thanks.. :)
I would like to thank you so much! I have been trying with JS to work this out, with no avail. This helps so much. I even bookmarked your site! (Which for me is a rarity) I will also link you back on my index.
Thanks again,
Tm0.
where i must place javascript code for blogger
example: between or ???
Hey David,
Happy New Year to you! Just wanted to drop you a quick note about topLink. I have been using it often in my web dev work and really enjoy the usability it adds to sites.
I actually think all sites should implement some version of back to top and as such I converted your topLink plugin into a Chrome extension ;) https://chrome.google.com/extensions/detail/afpmpmikeidpfnfmnmlpecnoipnnnfmn
I had this working on my site and now I can’t get it to scroll to the top of the page. Does anyone know how to fix this problem?
Thanks for showing us how to make this effect. Nice work!
Do I use both of the provided codes in one .js file to have support in all browsers?
As you’ve not mentioned how to use it.
And I’m not sure of javascript just yet.
Because I already have on of these but it isn’t supported in IE.
So use both in one .js file? or what to do with the IE fix code?
Thanks (I’ve subbed to comments).