How to create Scroll To Top button without JavaScript ?

By Published on -

 Hi...In my previous totorial i taught the same thing but in a different way using Html and JavaScript.The previous tutorial was 


But today in this tutorial we will learn the same thing but without JavaScript.Creating a Scroll To Top button without JavaScript is much easier than creating this with JavaScript, but is little bit tough to understand.

# Which way is better?

This is completely depends on you that which way you want to use to do this task.But there is a special benifit of not using JavaScript.By doing this task using only Html + CSS you can make a Smooth Scrolling Effect which can't be done using JavaScript.

# 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 + CSS .

#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 any JavaScript code in this tutorial 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 😊 So please read every point very carefully that you do not miss anything.

So let's do this step by step 👉

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


<a href="#" id="scroll-to-top-btn"> Scroll To Top </a>

I've just used a simple text in the code to make this easy to understand.But you can 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 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.😊 Then you just have to wrap this button/img tag by a Html anchor tag <a></a> like this below 

<a href="#" id="scroll-to-top-btn">
    <img src="YOUR IMAGE URL" />
</a>

Don't forget to give an id to your anchor tag so that you give a css style to it later.

Step 2:
======
Wow! you made an anchor tag to click.Now lets position it to the bottom right corner of the screen using a short CSS styling 😊 and the most important thing is to make the scrolling smooth,you also have to write a short css for the body element.

<style>

body{
    scroll-behavior: smooth;
}

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

</style>

Let me explain the css code above.The scroll-behavior property defines that how an elements will behave when we scroll them using an anchor tag.In this case,we've given the value smooth so when we will click on the anchor tag/button it will perform a smooth scroll.
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 Scroll To Top button also.Just put this css code before your html anchor tag ⏪


# 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 :
======
Untill this step we made a  Scroll To Top 🔝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 Scroll To Top button doesn't know to which position the webpage has to ne scrolled when someone click on it!😁 So let's tell our button to take us to the top of the webpage when we click on it...👉

So now we have to create another html element at the top of our webpage and have  to give an ID to the element.Then you have to use the same ID as the URL of our anchor tag like this ⬇

<div id="the-header-element">
    <h1> This is the top of the page </h1>
</div>

<a href="#the-header-element" id="scroll-to-top-btn">
    Scroll To Top
</a>

Don't forget ro use the # (Hash Tag) before the ID name inside the href="" attribute.This is same as you select an element through it's ID in a CSS Stylesheet.Now when someone click on the Link/Anchor Tag the webpage will be scrolled to the exact position where the html element will be found which has the ID - "the-header-element". The most interesting thing is that you can make your webpage scrolled to the bottom,top,center or anywhere of the page.Just put the ID of the element to which one's position you want your webpage to be scrolled as the URL of your anchor tag.

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;">
    
    <div id="the-header-element">
        <h1> This is the top of the page </h1>
    </div>

    <style>
        
        body{
            scroll-behavior: smooth;
        }

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

    </style>

    <a href="#the-header-element" id="scroll-to-top-btn">
        Scroll To Top
    </a>
    
</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 and i've not given any styles to the Scroll To Top button.Because i didn't want to waste time on styling.I've just tried to make you understand all the functionalities that how all these works.

So 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