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
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
