Hello readers, Today in this blog you’ll learn how to create a Scroll To Top or Back To Top Button using only HTML and CSS. Previously I have shared a Minimal To-Do List program that is based on HTML CSS & jQuery, now it’s time to create a Scroll Top Button using only HTML and CSS.
Nowadays every blogs and website have a separate button for going back to the top of the webpage. When we read or watch content on the website then we start scrolling down to see more content, but many times we want to go back on the upper side. For going back to the top of the webpage we have to scroll up, but most websites use a button to go back to the top with a single click.
You may saw on the many websites, there is a Scroll Top or Back To Top Button feature which is created using HTML CSS & Javascript. That is a pretty good feature and saves some seconds for your visitors or users.
If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Scroll To Top or Back To Top Button).
Video Tutorial of Back To Top Button using HTML & CSS
I hope you understood the basic codes and concepts behind the creation of Back To Top or Scroll To Top Button Features. As you have seen in the video this is a pure CSS program, which means only HTML & CSS used to create this program.
If you like this program (Scroll To Top or Back To Top Button) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.
Scroll To Top Button or Back To Top Button [Source Codes]
As always, before sharing the codes of this program (Scroll To Top or Back To Top Button). Let’s a few talks about the main tags and codes of this program. As you saw in the video, first I created a <nav> tag for the navbar of the webpage. Then inside the <nav> tag I created a <div> tag with the class name “logo” for logo. After that, I created another <div> tag with the class name “content” and placed all other tags inside it.
Similarly, inside the <div> name “content” tag I created some <h1>, <h2>, <p>, <ul>, and <li> tags for insert or show dummy text. In the CSS file, first I gave document to margin:0; and padding:0; using *(universal selector) which browser takes by default. Then I did some style to the navbar, texts etc.
In the HTML file, again I created a <div> tag with the class name “arrow-btn” and placed <a> tag and <span> tag inside it. Inside <span> tag I used a font-awesome class name for show arrow icon. In the CSS file, I did some style that icon to create a Scroll Top Button. At last, I took an HTML selector, and inside it, I put scroll-behaviour: smooth; value for show smooth effect on the button click.
To create this program (Scroll To Top or Back To Top Button). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Scroll to Top Button | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="arrow">
<a href="#" title="Back to Top"><span class="fas fa-angle-up"></span></a>
</div>
<nav>
<div class="logo">
CodingNepal
</div>
</nav>
<div class="content">
<h2 class="header">
Scroll to Top Button
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id quibusdam assumenda, suscipit odit illo deserunt aut placeat illum soluta? Tenetur nisi nostrum animi ratione rem, ex repellendus distinctio. Necessitatibus nam magnam omnis aspernatur molestiae temporibus iste quibusdam qui dicta aperiam beatae nisi ipsam architecto, voluptas perferendis voluptatibus saepe ipsum earum sapiente explicabo fugit consequuntur deleniti, illo sequi. Amet numquam est quia explicabo nihil quas nemo dolor doloribus ipsa molestiae voluptatibus, aspernatur repellat in tempora temporibus voluptas itaque ratione expedita eveniet iste minus, eligendi cumque et laudantium. Natus, eos ad nemo, dolor velit veniam similique assumenda dolorem, illo vel quo nesciunt.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi iure exercitationem illum omnis officiis quae magnam praesentium neque amet cum necessitatibus aliquid illo minus inventore voluptate reiciendis debitis, consequuntur libero ducimus cumque, quis totam quidem beatae in. Excepturi non culpa enim nesciunt iste molestias aperiam possimus, suscipit blanditiis corporis. Fugit eius, possimus. Nostrum fugit, animi voluptatibus quia reprehenderit perferendis culpa sint doloremque sapiente, vel explicabo veritatis quasi dolore necessitatibus rerum libero aperiam facilis a repellendus. Sed sint laboriosam odit itaque sequi corporis, consectetur amet, tenetur aspernatur, optio iure atque, asperiores quisquam eveniet laborum porro reiciendis expedita aperiam. Ipsum, ex eum, corporis odit perspiciatis eaque blanditiis reprehenderit quaerat fugit culpa voluptatum, cupiditate distinctio placeat. Temporibus enim ratione iste reiciendis, vitae et repudiandae ex obcaecati doloribus modi molestias facilis, recusandae adipisci nisi aperiam suscipit mollitia, aliquam! Iste sunt consequuntur modi quis mollitia, pariatur velit deserunt tempora magni id, tempore sint suscipit numquam!
</p>
<h2>
About Section
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt deleniti molestias natus vero sed, officia, doloremque quod reiciendis cumque labore exercitationem cupiditate suscipit iusto. Repellendus consequatur, iste deleniti consequuntur eius perspiciatis culpa temporibus cum nobis placeat inventore similique modi cumque dignissimos! Numquam accusamus eveniet animi vero, temporibus minus, nostrum, a pariatur ab repudiandae deleniti ratione eligendi quae ipsam fugit ullam ipsum ad ipsa tempore, adipisci sunt optio nemo earum. Repellat corporis nobis pariatur amet facilis, nisi rem voluptates obcaecati nesciunt dolore non et alias magni recusandae praesentium explicabo. Blanditiis amet nesciunt tenetur aliquid est aperiam pariatur itaque incidunt dolorum deserunt?
</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<h2>
Services Section
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt deleniti molestias natus vero sed, officia, doloremque quod reiciendis cumque labore exercitationem cupiditate suscipit iusto. Repellendus consequatur, iste deleniti consequuntur eius perspiciatis culpa temporibus cum nobis placeat inventore similique modi cumque dignissimos! Numquam accusamus eveniet animi vero, temporibus minus, nostrum, a pariatur ab repudiandae deleniti ratione eligendi quae ipsam fugit ullam ipsum ad ipsa tempore, adipisci sunt optio nemo earum. Repellat corporis nobis pariatur amet facilis, nisi rem voluptates obcaecati nesciunt dolore non et alias magni recusandae praesentium explicabo. Blanditiis amet nesciunt tenetur aliquid est aperiam pariatur itaque incidunt dolorum deserunt?
</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<h2>
Contact Section
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt deleniti molestias natus vero sed, officia, doloremque quod reiciendis cumque labore exercitationem cupiditate suscipit iusto. Repellendus consequatur, iste deleniti consequuntur eius perspiciatis culpa temporibus cum nobis placeat inventore similique modi cumque dignissimos! Numquam accusamus eveniet animi vero, temporibus minus, nostrum, a pariatur ab repudiandae deleniti ratione eligendi quae ipsam fugit ullam ipsum ad ipsa tempore, adipisci sunt optio nemo earum. Repellat corporis nobis pariatur amet facilis, nisi rem voluptates obcaecati nesciunt dolore non et alias magni recusandae praesentium explicabo. Blanditiis amet nesciunt tenetur aliquid est aperiam pariatur itaque incidunt dolorum deserunt?
</p>
</div>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
font-family: 'Poppins',sans-serif;
}
html{
scroll-behavior: smooth;
}
nav{
height: 70px;
width: 100%;
background: #1b1b1b;
}
nav .logo{
padding-left: 100px;
line-height: 70px;
color: #f2f2f2;
font-size: 30px;
font-weight: 600;
font-family: 'Poppins',sans-serif;
}
.content{
position: relative;
top: 10px;
padding: 0 100px;
}
.content h2.header{
font-size: 40px;
}
.content p{
padding: 10px 0;
font-size: 17px;
text-align: justify;
}
.content h2{
font-size: 35px;
}
.content ul{
padding-left: 30px;
}
ul li{
font-size: 20px;
}
.arrow{
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9;
}
.arrow a{
height: 39px;
width: 37px;
text-align: center;
background: #1b1b1b;
display: block;
border-radius: 3px;
}
.arrow a span{
color: #f2f2f2;
font-size: 25px;
line-height: 39px;
cursor: pointer;
}
That’s all, now you’ve successfully created a Scroll To Top or Back To Top Button using HTML & CSS. If your code not work or you’ve faced any errors/problems then please comment down or contact us from the contact page.
