Scroll to Top Button using HTML CSS & JQuery

Most websites nowadays add a scroll to top button on their websites. Sometimes landing page websites could be long in height, and when a visitor scroll down the webpage and for some reason, if they want to go back to the top for some information, they have to scroll back to the top. This experience sometimes annoys the visitor, and if they have to do this for every page, they will leave the website. If we think from the user perspective, every landing page website should have a back-to-top button website. For this snippet, I will highly suggest you follow the tutorial below from start to finish.

I am assuming that you have followed the entire video and have some ideas about the project we are making today. In this blog, I have shared a simple snippet based on creating a scroll to top or back to the top button using HTML, CSS, and a little bit of jquery code. After creating a simple-looking webpage, I have created a button for the bottom right corner of the webpage with a font-awesome 'chevron-up' icon in it. I have applied some necessary HTML CSS coding to create the whole website and the button. The codes are quite self-explanatory, and anyone with bare minimum knowledge of HTML and CSS can understand this. Later I have added a little amount of jquery code for the snippet to work. When the visitor is on top of the webpage, the button does not show up. But as they start scrolling down, then after a certain distance from the top, the scroll to top or back to top button will show up, and whenever the user clicks on that button, it will take them to the top. This is the central concept of this project. Now without further explanation, I have given you the code below to do some experiment by yourself.

You may also like:

Scroll To Top button using HTML CSS and JQuery ( Source Code ):

For making this snippet, you have to create one HTML and CSS file. Link the CSS file to your HTML and copy and paste the code below in your project.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Scroll To Top button using html css and Jquery</title>
	<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;900&display=swap" rel="stylesheet">
	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="homepage">
		<h1>homepage Area</h1>
	</div>
	<div>
		<div class="box">
			<h2>Main Header</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima nemo, necessitatibus! Animi id doloribus a sapiente, possimus atque, blanditiis ab eius doloremque, labore eligendi illo quas provident molestias. Cumque ut natus excepturi, quasi mollitia consequuntur repudiandae ex unde tenetur labore reprehenderit corrupti dolor hic aspernatur architecto, id dolorem itaque libero error rerum. Ut id odio saepe eius itaque asperiores delectus, quia, quisquam, omnis deleniti fuga assumenda ex sunt? Aperiam eaque deleniti eius eos facere, quos iure, molestiae! Quaerat deserunt fugiat atque id dolor quod, soluta placeat est porro eveniet tenetur earum eum veniam, commodi asperiores natus odio consequatur unde in incidunt labore excepturi laudantium rerum! Odit pariatur, animi in molestias odio dicta doloribus modi nobis nostrum cumque quidem eum, eveniet quae magnam aut cupiditate labore aspernatur. Eos dolor illum obcaecati quis voluptates voluptatibus, dolorem ullam eveniet sit exercitationem, inventore facilis! Necessitatibus quasi, odit non sunt saepe quaerat ea accusamus blanditiis impedit amet, laboriosam iste ipsa, enim, quisquam velit ullam quibusdam veritatis dolorum ipsam ipsum et. Sed, optio, enim. Consequatur sint repellat ipsum, modi repudiandae quisquam porro tenetur? Omnis at aut eos facere iusto distinctio consequatur vel beatae accusantium id labore dignissimos, blanditiis corporis praesentium, fugiat explicabo quasi non minus dolor sit. Excepturi laudantium id maiores dolor nesciunt, possimus earum fugiat quidem unde beatae aperiam quae, neque, molestias, quasi voluptatem magnam maxime! Doloremque rem, minus magni est, quae nemo distinctio adipisci cum debitis similique quia odit vel accusamus laborum eum ab reiciendis explicabo officiis esse ad maiores voluptates in. Aspernatur voluptate adipisci explicabo sequi incidunt, nisi quasi esse accusantium impedit facere quia vitae quod temporibus est fugit ipsam libero magnam. Ratione hic saepe repellendus minus tempore omnis eius, facilis quidem? Dolore, quos deserunt veniam fugiat odit, molestiae aliquam quae repudiandae sapiente soluta nesciunt! Mollitia vero, voluptate aperiam sit quam voluptatibus, obcaecati sint ad, dolorum odio debitis! Libero voluptates magnam ipsum, quod dolor amet perferendis nemo eum a eligendi nulla ea esse quidem blanditiis voluptatem dolorem sunt voluptatum earum ratione laboriosam, itaque laborum doloremque quis. Officiis ipsa cupiditate pariatur illum, id impedit ab eligendi repellendus facere tempora nemo molestiae eos! Molestiae, porro nam. Impedit corporis nobis quaerat ratione eum molestias velit tempore quam libero nihil eius illum, mollitia doloremque alias quisquam quos porro vero laborum voluptas placeat. Cumque eveniet, reiciendis repellendus architecto. Nihil laudantium ipsa accusantium itaque architecto sunt nulla ipsam aliquid assumenda earum vel deserunt, voluptatibus temporibus vitae. Beatae pariatur alias soluta delectus enim, vel debitis vitae odit vero culpa itaque id, praesentium at. Voluptatibus earum reprehenderit minus ex ab, dolorum vitae sunt cumque beatae magni sed consectetur, esse nemo, nam tempore inventore quia non. Esse est, nihil pariatur corrupti voluptates reprehenderit incidunt consequatur earum? Amet eveniet minus, quae architecto veritatis nemo eligendi beatae odit necessitatibus obcaecati dicta cupiditate placeat nostrum est, illo, enim aperiam incidunt? Pariatur, doloremque aspernatur porro! Sunt corrupti, numquam consectetur nisi. Quae laudantium molestias perspiciatis natus dolores impedit aliquid qui nemo sunt! Recusandae laborum totam quisquam, cum obcaecati odit quia delectus dolore nisi, aliquam dignissimos suscipit quos.</p>
		</div>
	</div><a class="scrollTop" href="#"><i class="fa fa-chevron-up"></i></a> 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">
	</script> 
	<script>
	       const scrollTop = document.querySelector(".scrollTop"); 
	       
	       window.addEventListener("scroll", () => {
	           if (window.pageYOffset > 100){
	               scrollTop.classList.add("active");
	           } else{
	               scrollTop.classList.remove("active");  
	           }
	       })
	</script>
</body>
</html>

CSS

* {
	margin: 0;
	padding: 0;
	font-family: 'Poppins', sans-serif;
}
html {
	scroll-behavior: smooth;
}
.homepage {
	height: 75vh;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	text-transform: uppercase;
	letter-spacing: 8px;
	background-image: url(https://images.pexels.com/photos/5399117/pexels-photo-5399117.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
}
.homepage h1 {
	color: #fff;
}
.box {
	padding: 60px;
}
.box h2 {
	text-align: center;
	text-transform: uppercase;
	font-size: 50px;
}
.box h2:before {
	content: '-';
	color: #262626;
	font-weight: 400;
}
.box h2:after {
	content: '-';
	color: #262626;
	font-weight: 400;
}
.box p {
	line-height: 2.2;
}
.scrollTop {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 35px;
	color: #fff;
	text-decoration: none;
	opacity: 0;
	pointer-events: none;
	transition: all .4s;
	background: deepskyblue;
	position: fixed;
	bottom: 16px;
	right: 32px;
	height: 60px;
	width: 60px;
	border-radius: 5px;
}
.scrollTop.active {
	bottom: 32px;
	pointer-events: auto;
	opacity: 1;
	transform: translateY(-50px);
}

Thanks for visiting the blog, and please follow my social media profiles and stay connected with the blog for more upcoming HTML CSS and javascript based snippets.

Post a Comment

Post a Comment

About Us

Contact Form

Scroll to Top Button using HTML CSS & JQuery

You might like

Post a Comment

Post a Comment

Contact Form