How to add jquery scroll to top button in Bootstrap Part 1-Create Button

click to begin

Youtube

Hello and welcome to another new episode of learning simplified.
In this tutorial the first thing that we are going to learn is to create a back to top
button.
You can see that on top of the page this button is not appearing but on scrolling down, you
can see that the button is now appearing and if we click here we can also observe that
the button is now reaching us to the top of the page and then the button disappears.
So this is known as the back to top button and we are going to create this button.
The first thing that we need to do is to design the button first into our HTML and using CSS
and then in the second case we need to create the required JavaScript that will conduct
all this animation.
So if we just place here an ID; all we are doing now we are coming right at the bottom
of this page and beneath all those things, all those coding insides we are now creating
a div with a class name of scroll-top.
There it goes.
Now if we provide here an a href...
Of what?
Of the same Id that we have created on the top of this page into this body segment; we
are going to copy it, and here we have to place it down . Now if we just get back to
our project and reload, we can see that a font awesome icon has been created over here
and now if we click on it we can see that we can reach directly on the top of this page.
So the question arises again, that if we can do it in such an ease then where is the animation
that we have seen here; if we click here we can see that there is a smooth scrolling inside.
It is now reaching on the top of the page with the kind of animation, with a kind of
smooth scrolling.
So this is the animation that we have to create with the aid of JavaScript.
Now before we try our luck into this JavaScript, first of all we need to design this button
here.
So that is why we need to make some customization into our styling page, into our CSS file.
And we are copying this class name scroll-top and inside this custom style sheet at the
bottom of the page, we will now customize this scroll-top class here....
Get back and reload.
There goes the first thing that we have done.
Now we need to customize this font awesome icon class that we have created.
And under which segment it is practically lying?
This font awesome class, it is practically lying within this scroll-top class.
So that is what we need to create over here.
We are getting back to our custom style sheet and we are now customizing the scroll-top
font awesome class which is present within this scroll-top class.
Get back to your project and reload and you can see that it is now working properly.
So here goes the font awesome icon and you can see that it is now fixed into position;
that means it is now retaining its position of 50% from bottom and 0% from this left.
And another thing let's change this color; instead we will be using this color here.
Reload.
Ok.
The color is here.
We need to set up the hover color.
We are....
Setting a hover color here..
Now reload and we can see that if we hover our cursor over here the color is now changed
into a reddish color from a bluish color.
So this is it up to it and it is working well so far, but without animation.
Now let's provide some animation here...
How to use Bootstrap4 Jumbotron code-Customize Jumbotron How to install and use font awesome 5 in our template Bootstrap Collapse Panel Part1-Make Tab list items How to Create a Mobile First Responsive Contact Form in Bootstrap Bootstrap 4 Typography Techniques, Part 3: How to Style Headings Min & Max Content Sizing in CSS Grid — 1/3 Flexibility How to use Font Awesome Icons in CSS-Final part CSS - Add Design to Your Website | Learn to Code How to Program a Todo List Web Application: bootstrap, html, css 2D Interactive Map with HTML CSS jQuery & Illustrator [2 of 3]

How to add jquery scroll to top button in Bootstrap Part 1-Create Button

Latest Posts