7 ‘Scroll to Top’ jQuery Solutions

‘Scroll to Top’ button controls are a great addition for pages with a lot of content and blogs with long posts.
In this post you will find seven jQuery solutions which allow your visitors to smoothly scroll right to the top of a page, making your website more user friendly.

1. jQuery topLink Plugin

The topLink jQuery plugin developed by David Walsh, allows you to fade in a “to the top” link when the users scrolls down on the page.
jQuery topLink Plugin

2. Disappearing “Scroll to top” link with jQuery and CSS

This tutorial will help you build a scroll to top link, that appears when the user scrolls down, and disappears when users reach the top of the page using a combination of CSS and jQuery.
Disappearing 'Scroll to top' link

3. Disappearing “Scroll to top” link with jQuery and CSS

Here’s a simple Scroll to Top button that hovers in the bottom right corner of your screen. he code is largely adapted from Brian Cray and David Walsh, but it’s a combination of the two ideas with the addition of a fade effect on the button and smooth scrolling action.
Hovering Scroll to Top Button With JQuery

4. jQuery Plugin: Scroll to Top

Here’s an unobtrusive, easy-to-install, jQuery script that adds a fading scroll to top link with animated scrolling. the script degrades gracefully, leaving nothing but a normal <a href > link.
jQuery Plugin Scroll to Top

5. UItoTop jQuery Plugin

Inspired by the great idea of David Walsh’s jQuery topLink Plugin, Matt Varone made a similar plugin but with two key differences, this one does not require you to add extra html markup or extra plugins to function. It will only work when JavaScript is turned on.
UItoTop jQuery Plugin

6. jQuery Scroll to Top Control v1.1

This script displays a stationary control at the lower right corner of the window that when clicked on gently scrolls the page back up to the top. Instead of always being visible on the user’s screen, the script lets you specify how far down the page the user is at (in pixels) before revealing the control.
jQuery Scroll to Top Control

7. Smooth GoToTop WordPress plugin

Starting from the smooth scroll script developed by Ariel Flesler, Mogosanu Bogdan has built a plugin for WordPress. In the settings page of the plugin, you can customize the css, the fading speed and the minimum height in pixels before revealing the control.
Use Google translator service to translate this page from romanian to your preffered language.
Smooth GoToTop WordPress plugin

A HP0-S26 braindump helps realize your dream of success with minimum effort. Just download 646-046 dump, study it and pass your 646-563 in first shot guaranteed.

10 Stylish jQuery caption plugins

10 Responsive Jquery Navigation Menu Resources

10 jQuery Custom Scrollbar Plugins

15 Excellent thumbnail gallery effects

25 Comments

ayman 02/28/2010, 5:54 pm:

great jquery solutions,thanks.
Jamir 03/01/2010, 6:29 pm:

great job! thanks for sharing!
Sheena Rai 03/04/2010, 11:44 am:

Great Designs. Nice Share. A Great Help…
favourite world 03/05/2010, 4:55 am:

superb designs.
DCP Web Designers 03/12/2010, 11:53 am:

Nice share – I was looking for a plugin for wordpress
Jacky 03/26/2010, 11:41 am:

I was looking for some jquery scroll plugins, and these are PERFECT!
kalamaras 05/03/2010, 4:29 pm:

perfecto guys!
κατασκευή ιστοσελίδων 05/31/2010, 3:02 pm:

Nice share thnx a lot!
PremierPixels 07/26/2010, 7:54 pm:

These plugins are really helpful. I learned so much from these links. Thank you admin for making this list. It’s so great.
Luke 10/05/2010, 12:37 pm:

Brilliant smooth scroll solutions!
Gabriel Zastawnik 10/29/2010, 2:27 pm:

Very nice collection. Brilliant job!

I used David Walsh’s plugin in my recent web project. It is perfect:)

Thanks for your job!
Pixelnoize 11/02/2010, 10:18 pm:

I was looking for a good “scroll to top” jquery- plugin. Now i got one.
Thanks for sharing!
Martina 01/29/2011, 6:26 am:

thanks for sharing! I have used David Walsh’s plugin for my website
kevin 02/24/2011, 8:26 am:

Here’s the lightest i’ve found:

JS:

$(document).ready(function(){
$(‘a[href=#top]‘).click(function(){ $(‘body’).animate({scrollTop:0}, ’400′); return false; });
});

HTML:

top

No fancy disapearing button but for a permanent link in the footer and the animation you cant beat that size.
kevin 02/24/2011, 8:29 am:

Forgot to mention that you gotta have jquery included in your site.
And the html code disapeared in my previous post but it goes like this without the :

a name=”top” /a
a href=”#top” top /a
David 03/14/2011, 9:48 am:

Hi there, thanks for this article – exactly what I have been looking for, and some really nice examples too.

However, I feel you left a very good example out – which is the one used in this post on your site – I think it’s slick and works very well!

Thanks,
David
Rahul Calicut 04/10/2011, 10:07 pm:

its been a long time iam searching searching for a tutorial like this. Just amazing… Thanks a lot
Matthew Cunningham 04/27/2011, 3:18 pm:

This article was of great use, thank you ever so much.
ζωγραφος 06/24/2011, 5:49 pm:

jQuery is great and useful thanx for sharing your work guys
alfonso 07/24/2011, 10:31 pm:

Hi there good guys of the web.. your “Scroll to Top of Page” isn’t working on the lower right.. with recent version of Google Chrome…
stellamilona 08/09/2011, 9:32 am:

My favorite is number 3.. Great effect!
Wiki Blogger 10/05/2011, 3:57 am:

Thanks for sharing, i will apply to the website
karl 10/06/2011, 7:17 pm:

These are some awesome jquery scrollers. Thanks!
Rhod Jane 02/14/2012, 10:25 am:

Thanks for your awesome script… i will try it now on my projects Thanks..
Chris Dawson 02/16/2012, 4:49 am:

Have a look too at this new template – Slidexy – we’ve put together: http://www.tallhat.com/templates/slidexy/ – it uses jQuery and also is responsive as it also presents the same content well on iPhone and iPad.