jQuery Top Bottom Scroll

Use jQuery To Scroll From Top To Bottom

With a single click, jQuery can be used to scroll from the top to bottom. The same procedure can be used to scroll from the bottom to the top. A perfect use for this procedure is a gallery or scrolling pages.

Two links will be placed at the bottom that will act as top and bottom scroll buttons respectively. The procedure is cross-browser and works with out-dated browsers.

This tutorial uses the HTML, CSS and jQuery. The jQuery library is a JavaScript extension that provides easy to use functions such as scrolling.

Text editor.
HTML.
CSS.
jQuery.

Browser to view output.

Optional Download and install suitable text editor

Any text editor with regular expression support will work. To select a reviewed lightweight programming editor read the Ojambo.com Lightweight Programming Editors.

jQuery-Scroll-Top-Down.html file

<!--
  jQuery-Scroll-Top-Down.html
  
  Copyright 2011 Edward <http://ojambo.com>
  
  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation; either version 2 of the License, or
  (at your option) any later version.
  
  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.
  
  You should have received a copy of the GNU General Public License
  along with this program; if not, write to the Free Software
  Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
  MA 02110-1301, USA.
        
        
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Ojambo.com jQuery Scroll From Top To Bottom</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<style>
		div.container {
			background: Green;
			position: relative;
			width: 200px;
			height: 200px;
			overflow: scroll;
		}
		p.content { 
			width:300px; 
			height:300px; 
			}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script type="text/JavaScript">

		$(document).ready(function() {
			// Scroll To Top.
			$('a#top').click(function(){
				$('div.container').animate({scrollTop: 0}, 2500);
				return false;

			});	
			// Scroll To Bottom.
			$('a#bottom').click(function(){
				pHeight = $("p.content").height();
				$('div.container').animate({scrollTop: pHeight}, 2500);
				return false;

			});												
		});

	</script>	
</head>

<body>
	<div class="container">
		<p class="content">I will be Scrolled!</p>
	</div>
	<a id="top" href="#">Top</a>
	<a id="bottom" href="#">Bottom</a>
</body>

</html>

The jQuery library will listen for the top and bottom links to be activated. If the user clicks the top link, the content will scroll to the top and the opposite will happen for the bottom link.

How to Use:

Run the jQuery-Scroll-Top-Down.html file in your favourite browser.
Click the “Top” link to scroll up.
Click the “Bottom” link to scroll down.

Conclusion:

The JavaScript library jQuery can be used to listen if a button was pressed and scroll. The scroll will be either to the top or to the bottom.

Do not assume that users simply disabled JavaScript.
Have a fall-back method for instances when JavaScript is unavailable.
Reuse as much JavaScript as possible to keep optimal loading times.