11 Top jQuery Scroll to Top of Page Plugin Tutorials with Examples

By: Suresh Dasari Sep 27, 2012

Introduction:

Here I will explain different type of available JQuery Scroll to Top or Scroll Back to Top or Back to Top plugins.

Description:

In previous article I explained 9+ JQuery AutoComplete plugins, 6+ JQuery Password Strength Plugins and JQuery, Ajax, asp.net, SQL Server etc. Now I will explain different type of available JQuery Scroll to Top or Back to Top or Scroll Back to Top plugins.

JQuery Scroll to top button,Back to top button option on webpage in asp.net

In many sites we will see option like Back to Top or Scroll To Top button option when we scroll the webpage down this type of functionality we can implement easily by using JQuery when scrollbar top position greater than certain value.

Source Demo

Animated Scroll to Top

Due to a number of requests, I'm writing a detail tutorial on how to create an animated scroll to top as seen on Web Designer Wall. It is very simple to do with jQuery (just a few lines of code). It checks if the scrollbar top position is greater than certain value, then fade in the scroll to top button. Upon the link is clicked, it scrolls the page to the top.

Source Demo

Smooth Page Scroll to Top with jQuery

In this tutorial, we will create smooth page scrolling effect for returning to the top of the page using jQuery.
We will create a button at a fixed position on the bottom right of the page, so that we once click it, it scrolls up with an nice animation rether than a page refresh or a straight jump to the top. We will make the button visible only if the page is scrolled down, instead of being always visible.

Source Demo

UItoTop jQuery Plugin

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 ( on purpose ), It’s easy to setup with only one line of code, and it works cross-browser nicely ( Tested: IE6-8, FF, Safari ).

Source Demo

‘Back to top’ link using jQuery

If you noticed I have a ‘Back to top’ link appearing at the bottom right everytime you scroll down the page. Wonder how it was made? I’ll tell you. It’s quite simple. What you need is a div containing the text, apply some css and add an event using jQuery.

Source Demo

jQuery topLink Plugin

In this article we will see how to implement scroll to option in jQuery

Source Demo

BackToTop : button «Back to top» appears when scrolling down your page - jQuery plugin

BackToTop is a plugin who will add a "Back to top" link automatically to your page.

All is create by BackToTop plugin. No HTML code required !!

You can easily find thousand plugins like that, but our is more customizable than all others.
The link is entirely skinnable with css. In the demonstration page, the link is full CSS3. But you can adapt it for IE (IE is bad, please delete it from your computer).

Optionally it can benefit from the jQuery Easing plugin with a different easing animation for the page scrolling.

Source Demo

Disappearing "Scroll to top" link with jQuery and CSS

Seen in many forms, such as "Back to top," "Top of page," or "Scroll to top," these links provide a way for users to jump to the top of the page, back to navigation and other handy stuff.

This tutorial will help you build a scroll to top link, or whatever you call it, that appears when the user scrolls down, and disappears when users reach the top of the page using a combination of css

Source Demo

Animated jQuery "Back to top" plugin

jQuery plug-in that automatically inserts a sliding "Back to top" button. It slides in view when the page is scrolled down, and slides back out of view when the page is back at the top again.

Source Demo

Scrolling to the Top and Bottom with jQuery

Here’s a way to scroll to the top or bottom of your website with a simple click. I have used the jQuery special scroll events from James Padolsey, and some few extra lines of jQuery. There are two buttons with fixed position on the bottom left of the page, each one with the functionality to move either down or up in the page. If you scroll the page, these two buttons will fade out, which gives a nice and smooth effect.

Source Demo

jQuery – Effet smooth scroll

jQuery smooth effect of scroll fluid is already built, according to your user settings on some browsers. It is manifested by a smooth scrolling of the webpage when you get off or ride through the mouse wheel, or the keys on your keyboard.