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 blog and website has 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 to 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 see on many websites, that 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 having difficulty understanding what I am saying. You can watch a full video tutorial on this program (Scroll To the Top or Back To the Top Button).
Video Tutorial of Back Top Button using HTML & CSS
I hope you understood the basic codes and concepts behind the creation of the 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 are 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 the Top Button or Back To the Top Button [Source Codes]
As always, before sharing the codes of this program (Scroll To the Top or Back To the 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 the document to margin:0; and padding:0; using *(universal selector) which the 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 the <span> tag I used a font-awesome class name to show the 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-behavior: smooth; value to show a 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 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 style.css and paste the given codes into 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 does not work or you’ve faced any errors/problems then please comment down or contact us from the contact page.
you are best at coding
Thank you so much 🙂
you are marvellous!!
your code is very impresive
Here is the codes – https://www.codingnepalweb.com/2020/06/responsive-navbar-with-search-box-html-css-javascript.html
i want something like your navigational bar can you help me?
Thanks bro..keep visiting.
NICE. GREAT. GOOD JOB BROD