How to create Scroll To Top ⬆ button using Html + JavaScript

By Published on -

# Are your web pages so long to scroll?🤔 

# Are you thinking that how to make this easy to Scroll to the top by just on a click?


Then no problem 😊 let's create a Scroll To Top ⬆ button in a verrrrrry simple way using only Html + JavaScript .

# Why you need a Scroll To Top button?

Because a Scroll To Top ⬆ button allow you to navigate to the top of the page by just one click and this is very usefull when you have a webpage which have a lot of content,so that is long enough to scroll to the top when you are in the bottom of the page!😊


I will not use so many hard codes and i'm not making a tutorial like copy the code and paste it there 😁.Actually i'm going to teach you and make you understand how Scroll To Top works and how you can make this yourself 😊

Step 1: 
======
Create a simple html button like this below⬇and put it into the <body></body> tag of your webpage.


<button id="scroll-to-top-btn"> Scroll To Top </button>

I've just used a simple text button to make this easy to understand.But you cam use fontawesome icon or any up arrow image as your scroll to top button.You can also use any other html elements instead of a button.For example you can use an <img/> element for this and then use an up arrow image like this ⬇


<img id="scroll-to-top-btn" width="40px" height="40px" src="YOUR-IMAGE-URL" />

It depends on you that which one you want to use and rest of the rules are same always.😊


Step 2:
======
Wow! you made a button to click.Now lets position it to the bottom right corner of the screen using a short CSS styling 😊

<style>

#scroll-to-top-btn{
    position:fixed;
    bottom:10px;
    right:10px;
}

</style>

Let me explain the css code above.The position: fixed; will make your button fixed to the screen and bottom: 10px; , right: 10px; will give your button a fixe position 10px far from the right and bottom side of the device screen like this⬇


In the above picture you can seee the Scroll To Top button is in a fixed position and there is a little bit distance between the right and bottom border of the screen.

Same thing will happen to your button also.Just put this css code before your html button ⏪


# Why this should be fixed?🤔

If you give a fix position to the Scroll To Top button,then it will alwats be in a same position and it will not hide when you scroll.So you xan click to this button any time you want!

Step 3 (Last Step):
===============
We've completed 50% of our task and this is the final step to create a complete functional scroll to top buttton using javascript.

Untill this step we made a html button and given a fix position,but still our code will not work.It will not scroll you to the top of your webpage.


Because our html button doesn't know what to do when someone click on it!😁
So let's tell the button to take us to the top of the webpage when we click on him...👉

Wait a minute...🤔 how can we tell our button to do somthing on click?

Oh yeaaaah!...using JavaScript .Okay,so lets do this.You have to just Re-write your html button code same as the code given below⬇

<button onnlick="window.scrollTo(0,0)" id="scroll-to-top-btn">
    Scroll To Top
</button>

You may notice a change between the above code and the code we've written before.
In the above code onclick="" attribute accepts only JavaScript codes and these codes will execute when someone click on the html element containing this onclick attribute.

So we called the scrollTo(X,Y) method/function of the window object and this method accepts two parameters 1st one is for ↔ X axis and 2nd one is for ↕Y axis.That means paremeter X is the distance of how much to scroll horizontally and parameter Y is the distance of how much to scroll vertically .In this case we want the html button take us to the top of the webpage and we are scrolling Vertically (Y axis), so we have just given X=0 because we don't need to scroll horizontally and Y=0 because we want to go to the most top of the webpage vertically and the most top position of a webpage is 0 distance on Y axis.That's why we hace written onclick="window.scrollTo(0,0)".

So at the end the complete code will be like this - 

<!DOCTYPE html>
<html>
<head>
    <title>Scroll To Top Demo</title>
</head>
<body style="height:2000px;">
    
    <h1>This is the top of the page</h1>
    
    <style>
        
        #scroll-to-top-btn {
            position: fixed;
            bottom: 10px;
            right: 10px;
        }
        
    </style>
    
    <button onclick="window.scrollTo(0,0)" id="scroll-to-top-btn">
        Scroll To Top
    </button>
    
</body>
</html>

I have given a height of 2000px to the body tag,because generally in this code or webpage there is no content so the height of the page will not so much.So we can't scroll the page and for this reason i've just made the page 2000px long,so that we can scroll it.

Now i hope you understand how you can create a Scroll To Top button very easily without using so much hard codes.If you still have any confusions or questions then ask in the comment box below.

Thanks for reading this tutorial.Please share this to your friends or into your social media.😊
Categories :

Comments

Post a Comment