jQuery

【jQuery】Scroll to the Top of the Page Animation

 

In this post, I’m going to share how to create “scroll to the top of the page” button.

I think you can see an upward arrow image on the bottom-right corner in this page.
 

 

A lot of websites have this button because it helps users to return to the top of the page quickly and check the menu bar.

Let’s create this button on your website too:)

 


 

Video

【jQuery】Scroll to the Top of the Page Animation

 
 

How to Code

Create index.html

First, create HTML file and prepare dummy text and triangle shape.

 

Line 30: ▲

This HTML entity code displays a triangle shape like this: ▲
You can find more entities here. https://www.w3schools.com/html/html_symbols.asp
 
 

Add CSS style

Add lines 6-25.

 
 

Load jQuery

In order to load jQuery, you can download jQuery files or use CDN.

CDN stands for Content Delivery Network, and it makes super easy to load Frameworks and Libraries.

In this example, we’re going to load jQuery through Google CDN.
 

Add lines 3-9.

 
 

Scroll Top Animation

Add lines 5-8.

 

Line 6

You can set duration(scrolling speed) ‘fast’, ‘slow’ or milliseconds.
The default duration is 400 milliseconds.

 
 

Fade In & Out Animation

Finally, let’s implement fade in and out animation.

When a user scrolls over 300 px, the scroll button fades in.

Add lines 3-9.

 
 

Done!

 
 

Sample Code

 

ABOUT ME
Sara
Working as a freelance programmer in Japan. I try to make coding as simple as possible. Hope you enjoy coding 🙂