How to add jquery to Back to Top Button-Make smooth scroll to top

click to begin

Youtube

We need to create the required JavaScript that will conduct all these animations.
Now let's get back to our index.html and beneath all those script source, those were involved
to run this page as a whole, beneath that we will be creating a new script tag....
So we have created a script tag here.
So this is the first thing that we need to set; display of this particular font awesome
icon- when it should display or when it should not that will be depending on this particular
script.
So this is what we need to create first.
In the first case all we are going to do...
Now we need to use a function here which is known as scrollTop().
Now we have to assign that particular class name that we have listed, on which particular
div or particular selector all these things are going to happen?
That means we have stated here and if else condition which states that do this function
when the particular page is at a height of greater than 100.
Then we need to fadeIn(); which class should it fade in?
This particular class.
Else, what is going to happen?
Now let's talk about our intention.
We want our particular class to appear whenever it is below a certain, a particular height
for say it is 100px.
Then it should appear and if the condition is not met, the page is on the top of the
browser, then there's practically no need to inherit this particular icon over here.
So that is why that icon will be disappeared when the page is on top.
But when the page is scrolled down to 100px height, that means if the height is now greater
than 100px, only then this icon will appear and it will let us on clicking to reach on
top of this particular page.
So that is why we have set this condition; at a height greater than 100px, scrollTop()
function will make this particular class 'scroll-top' to fade in.
Else, in the else condition when the page is on the top then there's absolutely no need
to display that particular icon and hence this fadeOut() option well then act and the
icon will be disappeared.
Now all we need to do we need to make some animation.
Another thing.
This will be surely a mistake if we do not specify whether it is a class or an ID.
So in each case whenever you are copying this do not forget to mention whether it is a class,
or it is an ID.
So in this particular case we have used our class here.
This is the class, 'scroll-top'.
So you need to mention it here.
Now all we are going to do we are mentioning...
The first thing is where should this scroll take place?
Is that it is practically should be in the windows scroll option.
So we need to mention that over here.
So that is what we need to mention here.
We need to activate this scroll() function.
Copy this And right beneath this else part where it is now ended; we have to close this
Windows scroll() function.
So we have defined this window scroll() function.
What is it exactly doing over here?
It is practically measuring the scrolling amount and that is why it is been adopted
over here.
Now it is almost clear and ok.
So now if we press control + s and get back to our project and reload if we get back,
click and you can see that the animation is now going on.
We can see now that the animation is present in to our page and everything is working quite
well.
So these are the things that we need to remember while creating this 'back to top button'.
The first thing all you need to do you need to wrap your entire page with a common ID
which is known as 'top' in this particular case and it is provided to the 'body 'segment
of your HTML page.
In the second case we need to create that clicking element on clicking which all these
things will happen.
So in the second case we created that particular element.
We need to decorate it so that is why we have decorated it into our custom style sheet and
here we have made all those things those are needed.
And in the last case we need to implement that particular JavaScript, we need to implement
that particular jQuery which will be acting in this particular case.
So all those things are the required steps to do this and the result will be something
like this one.
So if we now click here we can see that on clicking this particular element we can reach
on top of the page.
Hope you guys have liked this tutorial, also hope that this thing will be adding you in
Creating your own project, in tuning of your own project.
If you guys have liked this tutorial then do not hesitate to hit that red subscribe
button down below.
Hope to see you guys in our next tutorial.
Till then, bye.
How To Animate On Scroll Using ScrollMagic How to add Smooth Scrolling to your one page website with jQuery jQuery scroll to Top tutorial 2017 (Easy Method) How to Create an HTML Dropdown Menu | Learn HTML and CSS | HTML Tutorial | HTML for Beginners Responsive Website Basics (in 3 simple steps) Hierarchyviewer WordPress Tables - Build Tables in WordPress with Table Press Plugin Photoshop Scripting Tutorial Best Dreamweaver Tutorials: Adding "Back to Top" links How to Insert data into database with PHP MySql | PHP Tutorials in Hindi

How to add jquery to Back to Top Button-Make smooth scroll to top

Latest Posts