Scroll to top JQuery

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.

Scroll to top JQuery

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;
	});

});

I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.

DMCA.com Protection Status