• Tweet

In this tutorial we will create a simple smooth horizontal content scrolling effect with just a few lines of jQuery without using any plugin. We will use HTML and CSS for the layout and jQuery for the scrolling.

The Markup:

Content Markup:

Following is markup for the content. We have three content boxes wrapped in the contentbox-wrapper which is wrapped inside the #content div. Each of the content box has a unique id.

<div id="content">

	<div class="contentbox-wrapper">

		<div id="about" class="contentbox">
			<h3>About</h3>
			<p>Lorem ipsum dolor ...</p>
		</div>

		<div id="work" class="contentbox">
			<h3>Work</h3>
			<p>Lorem ipsum dolor ...</p>
		</div>

		<div id="contact" class="contentbox">
			<h3>Contact</h3>
			<p>Lorem ipsum dolor ... </p>
		</div>
	</div>

</div>

Menu Markup:

Now we need to create a navigation menu, so that by clicking on the links we can scroll to the relevant content id.

<div id="nav">
	<ul>
		<li ><a class="active" href="#" onClick="goto('#about', this); return false">About</a></li>
		<li><a href="#" onClick="goto('#work', this); return false">Work</a></li>
		<li><a href="#" onClick="goto('#contact', this); return false">Contact</a></li>
	</ul>
</div>

As you can see, we call a javascript function goto on clicking the link by passing two parameters. First is the id of of the target content div and second is reference of the clicked link. Passing the reference of the link helps us to add some css class to the clicked link with help of jQuery. The return false event cancels the default behavior of browser, so in this case it tells the browser not to follow the hyperlink after the javascript has run, therefore the browser will not attempt to go to the # and add # in the url.

The CSS:

Following is the CSS for the content divs:

#content{
	overflow:hidden;
	-moz-box-shadow: 0 0 2px 2px #ccc;
	-webkit-box-shadow: 0 0 2px 2px #ccc;
	box-shadow: 0 0 2px 2px #ccc;
}

.contentbox-wrapper{
	position:relative;
	left:0;
	width:3000px;
	height:100%;
}

.contentbox{
	width:580px;
	height:100%;
	float:left;
	padding:10px;
	background:#fff;
}

We have set the .contentbox-wrapper width to 3000px so that all content boxes can fit in it. The width of .contentbox is set as 580px. #content has overflow:hidden so that the overflowing content is not visitble.

The CSS for the menu is very simple:

#nav {
	margin-top:10px;
	background: url("navbg.png") repeat-x center bottom;
	border-bottom: 1px solid #DDDDDD;
	padding: 5px 10px;
}

#nav ul li{
	display:inline;
	margin-right:10px;
}

#nav a.active {
	font-weight:bold;
}

The link with the class active will be bold.

The JavaScript:

Here is the function for the horizontal scrolling and adding the CSS class to the link:

function goto(id, t){
	//animate to the div id.
	$(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 600);

	// remove "active" class from all links inside #nav
    $('#nav a').removeClass('active');

	// add active class to the current link
    $(t).addClass('active');
}

The above function animates to the div whose id is passed as a paramenter. It removes the css class from the previous link and adds to the link which is clicked.