Scroll to top JQuery

Last updated on January 21, 2016

When you have web page too long, it is recommended to provide your users easy navigation mechanism.You we can provide it in many ways like fixed navigation at top and left or right navigation panels..etc. Here I am gonna show you quick trick called “Scroll to top”. Basically by using this, user can easily reach to any specific content on your page as you decided.

Let’s began,fortunately JQuery provides an easy way to allow user to navigate throughout web page. Here in below example we will use JQuery’s ScrollTop() function along with JQuery’s animate() function to make scrolling smooth.

$(document).ready(function(){	
	$('.scrollToTop').click(function(){
		$('html, body').animate({scrollTop : 0},700);
		return false;
	});
});

if you want hide “.scrollToTop” element by default, you can check the page scroll state then you can show –

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

Scroll to top JQuery Example script

$(document).ready(function(){	

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

	$('.scrollToTop').click(function(){
		$('html, body').animate({scrollTop : 0},700);
		return false;
	});

});