How To Create An Animated Scroll To Top Button With jQuery

Creating a good user experience on your website is very important to keep people on the page. The best way to create a good user experience is to make it easy for people to use, if your site is difficult to use it annoys people and they will move on. For websites that have a lot of information on the page you will scroll far down the page to consume the information. Websites like Google+ who have infinite page scroll can be very annoying if you want to go back to the top of the page to click on a link there. You can either refresh the page or move the scroll bar all the way back to the top. Websites with initiate scroll need something to make it easy to return to the top. This is done with a button which will scroll them back to the top. In this tutorial you will learn how you can create an animated scroll to top button with jQuery.

#The Button

First lets create the button.

<a href="#" class="scrollToTop">Scroll To Top</a>

Now we can style the button with the following CSS.

.scrollToTop{
	width:100px; 
	height:130px;
	padding:10px; 
	text-align:center; 
	background: whiteSmoke;
	font-weight: bold;
	color: #444;
	text-decoration: none;
	position:fixed;
	top:75px;
	right:40px;
	display:none;
	background: url('arrow_up.png') no-repeat 0px 20px;
}
.scrollToTop:hover{
	text-decoration:none;
}

This will position the scroll to top button at the top right of the page which we have fixed to stay in this position. As you can see from the CSS we have set the display to be none so it will be hidden in the browser, you will see why we do this in the jQuery code.

#jQuery Part

Below is the jQuery part of this functionality, we will add a action on the scroll event to make the button appear when not at the top of the window and then make the button disappear when we are at the top of the page. We will then need to create a click event on the button to scroll to the top of the window. Copy and paste the following in the Javascript file to add the Javascript functionality.

$(document).ready(function(){
	
	//Check to see if the window is top if not then display button
	$(window).scroll(function(){
		if ($(this).scrollTop() > 100) {
			$('.scrollToTop').fadeIn();
		} else {
			$('.scrollToTop').fadeOut();
		}
	});
	
	//Click event to scroll to top
	$('.scrollToTop').click(function(){
		$('html, body').animate({scrollTop : 0},800);
		return false;
	});
	
});

This uses the scroll function which is ran when the visitor scrolls the window. We can then work out the position of the window by using the scrollTop function, if the position is move than 100 then we want to display the button. We display the button by using the fadeIn function to add the first bit of animation to the screen. If the scrollTop is less than 100 then we know that the window is near the top so we don't need to display the button. Now we can add a click event to the scroll to top button. On the click action of this button we want to scroll the page back to the top n animation by using the animate function. To scroll back to the top of the window we need to change scrollTop property to 0.

#Add This To A WordPress Site

To use this in a WordPress site you can download the WordPress plugin to add a back to top link to your site.

#Not Using jQuery?

If you don't want to install the dependency of jQuery on your website then you can do the above using pure JavaScript. Follow the link below to discover how to do this without jQuery. Back To Top Pure JavaScript