Create an Animated Scroll To Top Button With jQuery

Creating a good expression on your site for user is very important for you nowadays. If user didn’t feel easy with your site he will annoy from your site and maybe he will not come back again.

If you have a website that have a lot of  information and an infinite scroll to consume information then you must have “Back To Top” button on your site to give a facility to user to go back to top with an easy return to top.

In this toturial we are going to learn how to make Back To Top button with jQuery. It is very simple to do with a little code of jQuery. It checks if the scroll bar top position is greater than a certain value, then fade in the scroll to top button. When the link is clicked, it scrolls the page to the top.

[button-blue url=”http://demos.eggslab.net/animated-scrool-to-top-using-jQuery/” target=”_blank” position=””]Live Demo[/button-blue][button-green url=”http://demos.eggslab.net/downloads/3″ target=”_blank” position=””]Download[/button-green]

The Button

First lets create a simple button

<a href="#" class="ScrolMe">Scroll</a>

Now we can style the button with CSS

.ScrollMe  
{
	width: 50px;
	height: 50px;
	position: fixed;
	bottom: 50px;
	right: 50px;
	display: none;
	text-indent: -9999px;
	background-image:url(arrow.png);
}

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

jQuery

Below is the jQuery part of 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.

<script type="text/javascript">
$(document).ready(function () {

	$(window).scroll(function () {
		if ($(this).scrollTop() > 100) {
			$('.ScrollMe').fadeIn();
		} else {
			$('.ScrollMe').fadeOut();
		}
	});

	$('.ScrollMe').click(function () {
		$("html, body").animate({
			scrollTop: 0
		}, 600);
		return false;
	});

});
</script>

Don’t forget to add jQuery file otherwise it will not work.

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

[button-blue url=”http://demos.eggslab.net/animated-scrool-to-top-using-jQuery/” target=”_blank” position=””]Live Demo[/button-blue][button-green url=”http://demos.eggslab.net/downloads/3″ target=”_blank” position=””]Download[/button-green]