JQuery scroll page top and bottom

Reading Time: < 1 minute

This post is explaining how to scroll down to bottom or scroll up to top of the page or iframe using jquery.This is happening slowly animate to bottom and you can set time to scroll it.

html code like this.

Go to Page Bottom

JQuery script as follows.

    $(function () {
       $('a.goToBottom').click(function(){
 	 $('html, body').animate({scrollTop: $(document).height()}, 1000);
 	 return false;
       });
    });

You can set time as 2000, 5000, “slow”, “speed” .If you set time 2000, this must be mill-seconds.
If you want to scroll up the page to the top,use this code.Keep your html link at the bottom of the page.Unless if exist of the top how to scroll to again top.

    $(function () {
	$('a.goToBottom').click(function(){
	  	$('html, body').animate({scrollTop:0}, 'slow');
	        return false;
	});
    });

How to create animated page scroll top and bottom?

This is same process.But here top and bottom button will display after scrolling specific height.This is the html code.

        

            Scroll To Top
        

This is the Java Script code.

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

View Demo

Download JQuery animated scroll Example(32 KB)