Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

jQuery topLink Plugin

By  on  

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.

View Demo

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);
				}
			});
		});
	};
View Demo

Know of a better way to incorporate IE support? Share it!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos

Discussion

  1. Lim Chee Aun

    Hmm… I thought you can do el.hide() instead of el.css('display', 'none')? :P

  2. Craig Farrall

    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 :)

  3. David Walsh

    @Lim Chee Aun: Good call! Updated.

  4. RaduM

    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

  5. Ben

    It shows up fine but when I click it, it doesn’t scroll. Do you know why this would be?

  6. Kadir GÜNAY

    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,

  7. adel

    Nice job David !!

  8. E11World

    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 useful to someone.

  9. Faisal Alim

    i like it

  10. Akshit

    nice one..surely goin 2 try my hands on it!!

  11. Schalk Neethling

    Awesome script David! Implemented it on opensourcereleasefeed.com. Thanks!

  12. Janko

    I love the solution! Good work!

  13. Javis

    wow nice , i m going to use it on my blog

  14. ganesh

    I noticed its not working with IE…is there a way to solve it i need it…!

  15. David Walsh

    Works for me!

  16. Charley C.

    Has anyone yet mentioned today that IE sucks?

  17. Webchester

    David you do not cease to surprise :)

  18. Matt

    A really amazing idea David, thanks! I made a similar plugin inspired by yours,
    nice work!

  19. Pawan

    @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

  20. Aero

    Important thing for a longer post. Thanks. I will publish it in my Bangla blog Bangla Hacks.

  21. DanC

    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

  22. prabhakaran

    nice plugin..
    thanks.. :)

  23. Tm0

    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.

  24. mbah goblog

    where i must place javascript code for blogger

    example: between or ???

  25. Schalk Neethling

    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

  26. Tyler Abell

    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?

  27. RLam

    Thanks for showing us how to make this effect. Nice work!

  28. Mark

    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).

  29. Dennis

    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/

  30. Denis

    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. :(

  31. Melissa

    Thank you so much for sharing this plugin! =D

  32. Nick Warren

    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.

  33. John Apachet

    All works, apart from clicking the button. It doesn’t take you to the top? Any ideas???

  34. Skye

    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
  35. opendoor40

    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 :)

  36. Dredmix

    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

  37. Marcus

    Wonderful feature. Thank you. Will use it on my blog.

  38. Shaun McCran

    Hi,
    Top example, really easy to implement too.

    Also works fine in IE 9, so bonus!
    Shaun

  39. M

    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 behavior? Apart form that, great tutorial, thanks.

  40. Jan

    Hi,
    how could I use this to scoll to an Anchor?

    BR

  41. Jan

    Sorry for the tripple post!

  42. helppp

    Comment this code, and top menu link should work (in Chrome and Ie (windows 7) works and not in firefox):

    $('#top-link').click(function(e) {
    e.preventDefault();
    $.scrollTo(0,300);
});
  43. Grant Bailey

    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

    • David Walsh

      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!

  44. SM

    Very nice, what i was really looking for, let me just place a small image , hope would be perfect. thank you!

  45. Jack Black

    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…

  46. John

    Wow! Really nice plugin! Helps me a lot!

  47. Vishal

    lovely :)
    thank you!

  48. Chan

    Hi David,
    Latest jQuery 1.8 not working with the topLink.
    Will you make the updates?

  49. Chan

    Hi David,
    Recently jQuery is updated to v1.8.0.
    My scroll to top button now is not working anymore.
    I also updated jquery.scrollto v1.4.3. It not working either.
    Not sure if you have you encounter this issue.

  50. c-e

    hy, did some minor changes to the .js code. cause the scrollTop wasn’t working

    			//smoothscroll
			$('#top-link').click(function(e) {
				e.preventDefault();
				$('body,html').animate({scrollTop:0},800);
			});

    hope that helps.

  51. Hasan

    Hey,
    It was realy easy to implement this on my own page. Easy and clear steps :)

    Thank you !

  52. Mayank

    wow brilliant nice work i really appreciate this. keep it up.

  53. 羽傳茶業

    it’s easy to use
    thank you very much

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!