Fading Scroll To Top Link Using jQuery and CSS

Many websites on the Internet have feature called as “scroll to top” link at the Fading-Scroll-to-Top-Link-Using-jQuerybottom of the site(on the footer). If you are an active browser, you would have definitely come across a link at the bottom of the site which is called by different names such as “Scroll to top“, “Back to top” , “Go top” and so on. People find their own name for such links.

Today, we shall see a tutorial from Brian Cray on how to create a Disappearing Scroll to top link using jQuery. That is, the scroll to top link appears only when the user starts scrolling down the page. Though, the original tutorial, din’t have any demo. I’ve created a demo page as well with my own modifications visible.
 

DEMO | DOWNLOAD 

“Scroll to top” Using jQuery

Explanation:

We start by seeing how the HTML markup looks like.

HTML Markup:

The HTML section is easy to understand. Now, we shall see how the jQuery scripts look like:

jQuery:

The above script is simple, we use a scrollTop() function which is compared to top. We use the .fadeOut inbuilt ease function which takes the duration of the fade animation in milliseconds as we scroll down. We have given the default seconds of 400 milliseconds.

Don’t forget to add the jQuery Plugin along with the above script, here is an url for your reference:

Finally, we style the Scroll to top link and the box using little bit of CSS3 styling.

Here is the CSS

CSS:

The CSS has self explanatory comments along with the code. Please read to understand. If not, please let us know via comment.

DEMO | DOWNLOAD 

We will see more of such things in our future posts and tutorials. Before closing this tutorial, I would like to thank Brian for this tutorial.

Vinod

Vinod Suthersan is a enthusiastic web designer still learning new things on web designing. He loves designing, hunting new designs, blogging, and crazy about Internet. Know more

You may also like...