Scroll To Top Button using HTML CSS Jquery

byCodingFlicks -October 07, 2020

0

The scroll to top or back to top button is an element of a website which is normally located at the bottom corner of a website. It helps visitors to navigate back to the top portion of the webpage no matter how far down they have scrolled the website. In this blog post, we will share a code snippet on 'Scroll To Top Button using HTML CSS Jquery'. We have shared a video tutorial below based on this topic. You can watch the video if you want.

At present, lots of websites use a separate button for the user to get back to the top of the webpage. When viewers scroll down to explore more about the website, they sometimes need to get back to the top of the page for some reason. What If any website doesn't have a scroll to the top button? In that case, the visitor manually go back to the top of the website by scrolling. This experience sometimes may irritate the user, and they might not feel right. For this purpose, web designers, nowadays use the dynamic and animated jQuery scroll-to-top button in their website design. It will save a tremendous amount of time for the visitors, and they will have a good impression of the website.

Video Tutorial:

So we are assuming you have watched the demo. For making the project of Back To Top or Scroll To Top Button, we have used simple HTML and CSS code and a little bit of jQuery. These codes will be easy to understand and implement. If you like to add this project (Scroll To Top Button) and want the code, you have to scroll down and get this project's code.

Before sharing the code, We would like to talk a bit about this snippet (Scroll to Top with JQuery). We first created a div element named ''banner' and placed a simple h1 tag with some random text. After that, inside a div, We took another div called 'content,' and inside that, We have taken an h2 tag and paragraph tag with some lorem ipsum text. Here, content div is self-explanatory and indicates the contents that we see under any website's main banner.

Scroll To Top Button using HTML CSS Jquery [ Source Code ]:

To create this project, you have to create HTML and CSS files. You can create a separate JS file if you want for putting the js code we used here. After that, copy the code from the code boxes below. Then paste it into your files, and save. Run the project to your browser and play around with the code. For the direct download, click the download button at the bottom of this blog post.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll To Top Button using HTML CSS Jquery</title>
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="banner">
		<h1>Scroll to Top</h1>
	</div>
	<div>
		<div class="content">
			<h2>Header text</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><!-- lorem500 -->
            
		</div>
	</div>


    <a class="scrollUp" 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 scrollUp = document.querySelector(".scrollUp");
        window.addEventListener("scroll", () => {
            if (window.pageYOffset > 100) {
                scrollUp.classList.add("active");
            } else {
                scrollUp.classList.remove("active");
            }
        })
    </script>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
}
body {
    background: #000;
    font-family: montserrat;
}
html {
	scroll-behavior: smooth;
}
.banner {
	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(1.jpg);
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
    background-attachment: fixed;
}
.banner h1 {
	color: #fff;
    margin-bottom: 30px;
}
.content {
	padding: 120px;
    color: #fff;
}
.content h2 {
	text-align: center;
	text-transform: uppercase;
	font-size: 50px;
    margin-bottom: 30px;
}
.content p{
    text-align: justify;
    line-height: 1.9;
}
.scrollUp {
	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: crimson;
	position: fixed;
	bottom: 16px;
	right: 32px;
	height: 60px;
	width: 60px;
	border-radius: 5px;
}
.scrollUp.active {
	bottom: 32px;
	pointer-events: auto;
	opacity: 1;
	transform: translateY(-50px);
}

We hope you have got the snippet. For more snippets, please click the load more button on our website. Please follow our social media profiles to stay connected with this blog. Thank you for visiting the website.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.