Scroll GoToTop apparition with jQuery and CSS

Posted on November 5th, 2010. Written by Michaël Ambass.

Today we will focus on the use of popular javascript framework jQuery and see how to make a “Go to top” button when you scroll in our page. When we are at the top of the scroll, it will simply make it disappear animation.

For an example of what we achieve in this tutorial, you can just see the example on this same page. Try to scroll down this page and you’ll see a “Go to top” button that lets you to scroll up in the site with a slide effect.

Loading jQuery framework

jQuery framework is a javascript file (.js) who contains some Javascript code. To use it in our website, we must call this file in our page.

The jQuery Call is placed in the header of the page between the “head” tags.

So we will download the latest version of jQuery.
Visit the official site jquery: www.jquery.com and click “Download jQuery.

The download of the latest official version of jQuery and stable launches.
You finish downloading? Excellent!

We will now call the jQuery framework in our page so we can use the framework (remember to place the file you just downloaded into a /javascript directory that we’ll create at the root site).

Add the paste this code between the head tags of your page.

What this code does: it adds the javascript code found in the jQuery file to our page.
We now have the framework jQuery loaded into our page. We’ll start …

Creating the button placement and CSS

We will now focus on creating an element that is displayed when you use the scroll.

Let’s start by placing the xHtml of this button.
Paste this code just after the opening of your “body”

Let’s analyze this code, first we create a div with a class “scrollToTop” which will serve as a selector when we will work with jQuery.

In this div we place a normal link pointing to the anchor “#” and the text “Go to top” or the text displayed in the scroll.

You can also see that I have placed an onClick attribute that returns the value “false”. Returning “false” allows us to avoid accessing the anchor at the click, it cancels the click (we do not want to leave the page).

Well, we have our HTML code in place, we will now change the look of our button.

We will made a simple box entirely in CSS, you can of course change as you wish this box by applying a style to the div or add divs in it without problem.

As we place a specific class in our box “scrollToTop” we’ll use CSS to change its appearance.

Let me see that! We begin by putting the position “fixed” because we want that the box doesn’t move throughout the scroll. It remains that the element is fixed on the right and does not change its position on the screen.

We will now leave a little space on the right and bottom

These two lines make a 20px space on the right and on the bottom.

When the page load is complete, the scroll bar is found at the top so there is no need to display the basic box. We cached it with the CSS display property to “none”.

A bit of style now defining a width of 200px and 10px of padding.

It puts a black background correspond to #000 and its opacity is lowered to half “0.5″.

We have finish for the appearance of the box, we will now move to the big project: the javascript.

Javascript

Let’s start by displaying and hiding the box in the scroll function. Little reminder, when we load the page the box is automatically hidden in CSS (display to “none”).

What we want first is to know when the user uses the scroll. The “scroll()” javascript function will allow us to access this event on the selector “window”.

See what we have now:

Explanation: Taking as a selector “window” which is the our browser window. It performs the function code (callback) if the function scroll() is used.

So all the code that we will stand between “function(){” and “}” will run only when the user scroll.

We know how to detect the scroll, now see how to detect if it is at the top of the page and if the scroll move. If you’re on top, we will hide the box, if you are moving, we will display the box.

We took the code before and add two conditions.
The first occurs when the value of the “scrollTop” is to 0, that is when our scroll is at the top of the page.
If it returns “true”, so that the scroll is at the top, we hide our box with the “fadeOut” jQuery function. The “slow” indicates that the effect is done gently.

Note that I added a div with a class “content” to get a scroll and to test our example.

Let’s do a recap of what we have now.

File: index.html

File: style.css

File: javascript/scrollTop.js

When you start your index.html page and you scroll down the box “Go to top” should appear. When you are at the top of the scroll, it disappears.

Now that we manage the appear and the disappear of our box, we will activate the scroll upwards.
Very easy !

Good! We will start by adding a selector in our javascript that points to the link that is in the box.

We’ve added an event to our javascript. This is an event-type “live” with the parameter “click” that will allow us to detect all the clicks on the links found in the box with the class “scrollToTop”.

We will add the scroll up when the user clicks on this link now.

We select the element “html” and “body” of our page and launch an animation type “scrollTop” that change to 0, so at the top of the window. The parameter “slow” give the slow effect in our animation.

Complete code of the tutorial

File: index.html

File: style.css

File: javascript/scrollTop.js

I added a little style to our link to the CSS

Feel free to leave comments or remarks;)

Sample files

You can download the sample files of the tutorial below:
Download sample files

4 Responses »

Trackbacks

1. Graphic Design Links and Tutorials
2. designfloat.com
3. ADD a GoToTop Button in Wordpress posts with jQuery and CSS | Design
4. Go to top tutorial « Trying to blog…