How to create Back To Top Button in jQuery

Introduction:

In this tutorial, I will show you how to create a “scroll to top” or “back to top” button with JQuery. Sometimes after scrolling down to the Long website, scrolling up again is a bit of a problem. So the “back to top” button is a handy time-saving feature.

This button will be hidden when the user is at the top of the page. When a user starts scrolling it will show again. If the button is clicked, it will automatically scroll upwards and hide again.

Prerequisite:

  1. jQuery
  2. Bootstrap 4

Demo:

Back to top Code:

<!doctype html>
<html lang="en">
	<head>
		<!-- Required meta tags -->
		<title>Scroll to top jquery - CodeHasBug</title>
		<meta name="description" content="This is a demo of Back To Top Button" />
		
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
		
		<link rel="icon" href="https://codehasbug.com/wp-content/uploads/2021/06/gblogo.png" sizes="32x32" />
		<link rel="icon" href="https://codehasbug.com/wp-content/uploads/2021/06/gblogo.png" sizes="192x192" />
		<link rel="apple-touch-icon" href="https://codehasbug.com/wp-content/uploads/2021/06/gblogo.png" />
		<meta name="msapplication-TileImage" content="https://codehasbug.com/wp-content/uploads/2021/06/gblogo.png" />
		<style>
			.spacer{
				position: relative;
				height: 80px;
			}
			
			#back-to-top{
				position: fixed;
				bottom: 30px;
				right: 30px;
				display: inline-block;
				background-color: #0d745e;
				color: #fff;
				font-size: 37px;
				width: 50px;
				height: 50px;
				text-align: center;
				border-radius: 4px;
				transition: background-color .3s, opacity .5s, visibility .5s;
				opacity: 0;
				visibility: hidden;
				z-index: 200000;
			}
			#back-to-top:hover {
				cursor: pointer;
				background-color: #042921;
				text-decoration:none;
			}
			#back-to-top:active {
				background-color: #555;
			}
			#back-to-top.show {
				opacity: 1;
				visibility: visible;
			}
		</style>
		
	</head>
	<body>

		<!-- Back to top button -->
		<a id="back-to-top">^</a>
		<div class="container">
			<div class="row">
				<div class="col-12 mt-5 text-center">
					<h1>Back to Top Button</h1>
					<h2>Scroll down the page</h2>
				</div>
			</div>
			
			
			<div class="row justify-content-center mt-3">
				<div class="col-12">
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mattis vehicula pretium. Fusce ut lorem commodo, feugiat lorem eget, aliquam libero. Fusce tincidunt nunc ut tempus cursus. Phasellus viverra enim vel tellus semper, vel laoreet justo tempus. Pellentesque justo tortor, cursus vel turpis non, iaculis vulputate ante. Vestibulum accumsan orci vel sapien commodo, vehicula pharetra odio facilisis. Integer accumsan diam id pharetra imperdiet.
					</p>
					<p>
						Nulla tortor mauris, sagittis sit amet volutpat sit amet, laoreet eu eros. Suspendisse sed dolor facilisis, viverra velit ac, suscipit libero. Phasellus elementum, lectus congue porta aliquet, metus odio iaculis dolor, sed tempus neque nunc tincidunt dolor. Ut porta sem eget libero imperdiet, feugiat vehicula mi porta. Etiam mi mi, pretium eu urna in, pellentesque tempus lorem. Integer in sem leo. Duis porta nunc libero, non ultrices lacus vulputate eu. Cras ullamcorper eu nulla a varius. Aliquam porta, odio et lacinia efficitur, lectus risus semper leo, vestibulum luctus urna erat quis sem.
					</p>
					<p>
						Vivamus mollis orci eros, sed mollis ligula interdum eu. Cras convallis bibendum arcu, id tincidunt mauris sodales at. Pellentesque aliquet mauris libero, ut porta metus tempus quis. Suspendisse sed velit ac libero placerat facilisis sit amet id risus. Mauris egestas, magna vel euismod faucibus, nibh tortor maximus ex, et varius diam quam eget felis. Pellentesque facilisis eget neque sed tincidunt. Quisque mauris leo, faucibus a vestibulum quis, sodales vel lacus. Pellentesque ut pellentesque ex. Proin feugiat ex in blandit vulputate. Integer eu ex sit amet ipsum efficitur imperdiet non maximus est. Sed at eleifend felis, a efficitur orci. Nulla vehicula enim nec nibh mattis aliquam. Phasellus pharetra lacinia tincidunt. Sed sed auctor erat. Etiam bibendum quam ac tincidunt sagittis. Nulla facilisi.
					</p>
					<p>
						Donec nec augue sodales, commodo metus et, tincidunt justo. Donec nunc augue, sodales viverra magna sed, euismod iaculis nisi. Quisque condimentum tincidunt quam, quis luctus mi dapibus ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In sagittis aliquet tempor. Sed in tellus accumsan, viverra odio efficitur, sodales libero. Nulla efficitur tortor odio, nec porttitor risus venenatis at. Pellentesque finibus, risus in ullamcorper consequat, risus tortor rhoncus orci, a mattis ante tortor in nisi. Quisque sed condimentum sem. Praesent consequat diam lorem, et ultrices tortor efficitur sed.
					</p>
					<p>
						Nam luctus nunc id velit suscipit venenatis. Etiam feugiat placerat nulla, eget rhoncus quam efficitur vitae. Vestibulum vitae bibendum arcu, eu consectetur ex. Curabitur nec magna nec enim semper lacinia. Donec faucibus mauris id convallis lobortis. Mauris elementum vitae urna eu blandit. Nam volutpat quam quis dui sollicitudin, quis pulvinar nibh ornare. Aenean in tincidunt nunc, at tempus nibh. Pellentesque ac lectus augue. Nulla elementum libero magna, eget facilisis lectus iaculis eget. Quisque at maximus augue. Sed a ligula at dolor tristique lobortis eu vestibulum nibh. In congue convallis mauris eu tincidunt. Donec at tincidunt ex. Morbi fringilla, tortor ut ultrices suscipit, lorem arcu efficitur nisi, ut consectetur arcu erat ac sapien. Mauris eget rhoncus ante.
					</p>
                </div>
			</div>
			<div class="spacer"></div>
		</div>
		
		<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
		<script>
			$(document).ready(function(){
			
				$("#back-to-top").on('click', function(e) {
					e.preventDefault();
					$('html, body').animate({scrollTop:0}, '300');
				});
				
				$(window).scroll(function() {
					if ($(window).scrollTop() > 300) {
						$("#back-to-top").addClass('show');
					} else {
						$("#back-to-top").removeClass('show');
					}
				});

			});
		</script>
	</body>
</html>
About Ashis Biswas

A web developer who has a love for creativity and enjoys experimenting with the various techniques in both web designing and web development. If you would like to be kept up to date with his post, you can follow him.

Leave a Comment