JQuery Create a Scroll to Top Button Based by The Scroll Function ( Video Tutorial )

aymenz(64)

Published in

#utopian-io

Words

309

Reading

2 min

Listen

Play

Image Source

What Will I Learn?

I will learn how to create a scroll to top button by the scroll function after select the window element

Create a function inside the scroll event after select the ' $(window) '
How to use the ScrollTop() function to calculate the height that you scrolled .
Show and Hide events to display the button .
An animate that make the scrollTop equals to 0 after the click .

Requirements

Basic knowledge of JavaScript language .
Knowledge of JQuery .
Has the min jquery file .
Has an editor text .

Difficulty

Basic

Description

In this video I will show you how to create a scroll to top button , in many website especially the blogger sites that has a big content when you pass a specific size the button appear to take you to the top of the page for this I used a variable to get the button and I created a function based by the window scroll event and I check if the scroll that you did equals to 500 px for example the button will appear by the show() function , in the opposite case it will disappear by this function hide() , and when it appears I used a click event inside this click event I created a function to select the ' html and body ' elements and include to them an animate has scrollTop equals to 0 so the scroll will be 0 , and I added some CSS proprieties just to expand the height .