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!
Comments
Be Heard!
Share your thoughts without being a jerk! And wrap your code in <code> tags, f00!
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).
easy fix for IE8: place the link for ending the and then only make an empty div and in it the link
example: http://raumausstatter-goetz.de/
Your plugin is awesome! I just would like to divide fading in/out and smooth scrolling into 2 different functions to apply it to my own taste. How should I do that? Can you help me, please? I don’t know JS. :(
Thank you so much for sharing this plugin! =D
I’ve been messing around with this code for a while now, initially it worked straight away. Then on implementing it to my blog http://nicholaswarren.tumblr.com it seemed to not work. It’s only on testing that I realized it does still work in Safari, but not Firefox.
Now I’ve only recently started to understand jQuery so I’m still not sure how to fix this yet. A bit more tinkering needed, would like to test it in other browsers too.
Just thought I’d share this with you, in case someone else has had this problem.
All works, apart from clicking the button. It doesn’t take you to the top? Any ideas???
Works great but google chrome is spitting out this js console error everytime I click the link:
Uncaught TypeError: Object function (j,s){return new b.fn.init(j,s)} has no method ‘scrollTo’
(anonymous function)
c.event.handle
c.event.add.h.handle.o
hiya! I really love this, but I’m very new with this kinda code…
can someone tell me where to add these sections of code? (I’m using Tumblr by the way)
thanks :)
I was trying to implement this plugin to make it scroll smoothly, but to scroll to the left.
Firebug was giving a error on $.scrollTo(0,300); function not found
I’m not a big programmer but I’m been able to solve the problem by using.
$('#top-link').click(function(e) {
e.preventDefault();
$('body,html').animate({scrollLeft:0},800);
});
Instead of
$('#top-link').click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
I have scrollLeft() because thats what i needed but for scroll to the top use scrollTop()
Hope that this helps someone.
Cheers and thanks for the plugin
Wonderful feature. Thank you. Will use it on my blog.
Hi,
Top example, really easy to implement too.
Also works fine in IE 9, so bonus!
Shaun
Nice plugin, thanks. If I quickly scroll up and down with the mousewheel, the animation continues. Should I use stop() somewhere to correct this behaviour ? Please advise, thanks!
-Mark
Great post! But if I quickly use mousewheel to scroll up and down, the animation continues by itself. Can I use stop() somewhere to correct this behaviour? Appart form that, great tutorial, thanks.
Hi,
how could I use this to scoll to an Anchor?
BR
Sorry for the tripple post!
Comment this code, and top menu link should work (in Chrome and Ie (windows 7) works and not in firefox):
//smoothscroll
/*$(‘#top-link’).click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});*/
Dear David,
Happy new year.
Many thanks for publishing your plugin.
I publish long text-based web documents for use by my students. In addition to the ‘Top of Page’ link I would also like to add a ‘Bottom of Page’ link so that students can jump straight to the bottom of the page. Also, when the student is mid-page, I’d like both the ‘Top of Page’ and ‘Bottom of Page’ links to be visible. Is there any straightforward way of achieving this using your plugin. I am not a jQuery / Javascript expert so I would be very grateful if you could advise me.
Second: does your licence allow me to use your plugin on my University’s web site. The pages in which it would be used will be accessible only to students and instructional staff.
I would be grateful for your responses.
Many thanks and kind regards,
Grant Bailey
University of Western Sydney
Hello Grant,
Per your questions:
1. A tiny bit of work would need to be done to swap out the link text and href within this block:
if($(window).scrollTop() >= settings.min) {
el.fadeIn(settings.fadeSpeed);
}
else {
el.fadeOut(settings.fadeSpeed);
}
2. Use it however you’d like!
Very nice, what i was really looking for, let me just place a small image , hope would be perfect. thank you!
Awkward on a wide screen monitor though, if the main site is centered at 960px, the “top of page” link appears waaaaay off to the right over there and probably goes un-noticed…
Wow! Really nice plugin! Helps me a lot!
lovely :)
thank you!