【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:)

Contents

Video

【jQuery】Scroll to the Top of the Page Animation

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

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 lines 6-25.

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.

Add lines 5-8.

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

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.