jQuery Left Right Scroll

Use jQuery To Scroll From Left To Right

With a single click, jQuery can be used to scroll from the top to bottom or left to right. The same procedure can be used to scroll from the bottom to the top or right to left. 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, bottom, left and right scroll buttons respectively. Scrolling from top to bottom only was created in the Ojambo.com jQuery Top Bottom Scroll. 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-Left-Right.html file

<!--
  jQuery-Scroll-Left-Right.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;

			});
			// Scroll To Left.
			$('a#left').click(function(){
				$('div.container').animate({scrollLeft: 0}, 2500);
				return false;

			});	
			// Scroll To Right.
			$('a#right').click(function(){
				pWidth = $("p.content").height();
				$('div.container').animate({scrollLeft: pWidth}, 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>
	<a id="left" href="#">Left</a>
	<a id="right" href="#">Right</a>	
</body>

</html>

The jQuery library will listen for the top, bottom, left and right 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. If the user clicks the left link, the content will scroll to the left and the opposite will happen for the right link.

This page uses an internal style sheet located in the head section. The container is given a position of relative and smaller dimenstions than its content. The scroll bars are option, but they show the direction of the scroll action.

Bottom and right scrolling action require the height and width of the content respectively. Both bottom and right scrolling do not have pre-defined jQuery functions. The click function has a return set to false to prevent normal anchor actions.

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.

Demonstration:

Ojambo.com jQuery Left Right Scroll

Image Missing — Ojambo.com jQuery Left Right Scroll

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.

Ojambo.com Lightweight Programming Editors.
Ojambo.com jQuery Top Bottom Scroll.
jQuery.