Create An Animated Scroll Back To Top Button With jQuery

The Scroll Back to Top button helps you to enhance the user experience of your website. Probably you might notice in most of the website that the button will appear at the bottom right corner of a web page when you start scrolling down and crosses the defined range. While clicking that button, it will scroll to the top of the web page. This button is most helpful when the web page contains the infinite scroll or the page with long content.

This article will help you to add an animated scroll back to top button to your webpage using jQuery and CSS.

Create A Button

Create an HTML link in the body section of your web page like an example given below,

<a href="javascript:void(0);" id="back_to_top" title="Scroll to Top"></a>

Adding Style With CSS

After creating the anchor tag, add the following CSS code to style the link as per your theme.

#back_to_top {
    display: none;
    background-color: #7CC088;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 4px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    transition: background-color .3s;
    z-index: 1000;
    text-decoration: none;
}

#back_to_top:hover {
    cursor: pointer;
    background-color: #068D49;
}

#back_to_top:active {
    background-color: #068D49;
}

You can use the most popular font library FontAwesome to add the icon for your back to top button. Use the below code to access the FontAwesome library.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

After including the FontAwesome library, use the following CSS code to style the button icon,

#back_to_top::after {
    content: "\f062";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    font-size: 2em;
    line-height: 50px;
    color: #fff;
}

Adding Functionality With jQuery

Before starting to add the functionality to the button, you have to include the jQuery library as code given below,

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

After including the jQuery library, use JavaScript inbuilt method called scroll() to check whether the page is scrolled or not. Here is the code that will show the button (use fadeIn() method) if the page is scrolled down greater than 200 pixels, otherwise, the button will be hidden (use fadeOut() method).

var btn = $('#back_to_top');

// ===== Scroll to top ====
$(window).scroll(function() {
	if ($(window).scrollTop() > 200) { // If page is scrolled more than 200px
		btn.fadeIn(); // Fade in the arrow
	} else {
		btn.fadeOut(); // Else fade out the arrow
	}
});

Here, the method scrollTop() is used to check the window scrolled position.

The following script is used to add the click event for the back to top button.

// ===== Button click event ====
btn.on('click', function(e) {
	e.preventDefault();
	$('html, body').animate({
		scrollTop:0 // Scroll to top of page
	}, '300');
});

Here, the animate() function and scrollTop event are used to scroll to the top of the page.

Here is the complete code to create an animated scroll back to top button with HTML, jQuery and CSS,

<!doctype html>
<html>
	<head>
		<title>Scroll Back To Top</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

		<style type="text/css">
			#back_to_top {
				display: none;
				background-color: #7CC088;
				width: 50px;
				height: 50px;
				text-align: center;
				border-radius: 4px;
				position: fixed;
				bottom: 30px;
				right: 30px;
				transition: background-color .3s;
				z-index: 1000;
				text-decoration: none;
			}
			#back_to_top:hover {
				cursor: pointer;
				background-color: #068D49;
			}
			#back_to_top:active {
				background-color: #068D49;
			}
			#back_to_top::after {
				content: "\f062";
				font-family: FontAwesome;
				font-weight: normal;
				font-style: normal;
				font-size: 2em;
				line-height: 50px;
				color: #fff;
			}
		</style>

		<script type="text/javascript">
			jQuery(document).ready(function($) {
				var btn = $('#back_to_top');

				// ===== Scroll to top ====
				$(window).scroll(function() {
					if ($(window).scrollTop() > 200) { // If page is scrolled more than 200px
						btn.fadeIn(); // Fade in the arrow
					} else {
						btn.fadeOut(); // Else fade out the arrow
					}
				});

				// ===== Button click event ====
				btn.on('click', function(e) { 
					e.preventDefault();
					$('html, body').animate({
						scrollTop:0 // Scroll to top of page
					}, '300');
				});
			});
		</script>
	</head>
	<body>
		<div>
			<!-- Your page content here -->
		</div>

		<a href="javascript:void(0);" id="back_to_top" title="Scroll to Top"></a>
	</body>
</html>

Hope this helps.

Leave a Reply

Your email address will not be published. Required fields are marked *