Smooth Vertical or Horizontal Page Scrolling with jQuery

In this tutorial we will create a simple smooth scrolling effect with jQuery. We will create a horizontal and a vertical website layout to show the effect. We will be using the jQuery Easing Plugin and just a few lines of jQuery. So, let’s start! The Markup The markup for our example […]

View demoDownload source

In this tutorial we will create a simple smooth scrolling effect with jQuery. We will create a horizontal and a vertical website layout to show the effect. We will be using the jQuery Easing Plugin and just a few lines of jQuery.

So, let’s start!

The Markup

The markup for our example page is going to be very plain. We will have three sections with a heading and a paragraph and am unordered list for the navigation:

<div class="section black" id="section1">
	<h2>Section 1</h2>
	<p>
		MY Spectre around me night and day
		Like a wild beast guards my way;
		My Emanation far within
		Weeps incessantly for my sin.
	</p>
	<ul class="nav">
		<li>1</li>
		<li><a href="#section2">2</a></li>
		<li><a href="#section3">3</a></li>
	</ul>
</div>
<div class="section white" id="section2">
	<h2>Section 2</h2>
	<p>
		A fathomless and boundless deep,
		There we wander, there we weep;
		On the hungry craving wind
		My Spectre follows thee behind.

	</p>
	<ul class="nav">
		<li><a href="#section1">1</a></li>
		<li>2</li>
		<li><a href="#section3">3</a></li>
	</ul>
</div>
<div class="section black" id="section3">
	<h2>Section 3</h2>
	<p>
		He scents thy footsteps in the snow
		Wheresoever thou dost go,
		Thro' the wintry hail and rain.
		When wilt thou return again?

	</p>
	<ul class="nav">
		<li><a href="#section1">1</a></li>
		<li><a href="#section2">2</a></li>
		<li>3</li>
	</ul>
</div>

The HTML is going to be the same for both examples.
Let’s take a look at the style.

The CSS

Since we have two examples, we will start with the horizontal page style.

The main idea is to make the sections very wide and 100% in height. We will add a background image to the bottom right of each section:

*{
    margin:0;
    padding:0;
}
body{
    background:#000;
    font-family:Georgia;
    font-size: 34px;
    font-style: italic;
    letter-spacing:-1px;
    width:12000px;
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
}
.section{
    margin:0px;
    bottom:0px;
    width:4000px;
    float:left;
    height:100%;
    text-shadow:1px 1px 2px #f0f0f0;
}
.section h2{
    margin:50px 0px 30px 50px;
}
.section p{
    margin:20px 0px 0px 50px;
    width:600px;
}
.black{
    color:#fff;
    background:#000 url(../images/black.jpg) no-repeat top right;
}
.white{
    color:#000;
    background:#fff url(../images/white.jpg) no-repeat top right;
}
.section ul{
    list-style:none;
    margin:20px 0px 0px 550px;
}
.black ul li{
    float:left;
    padding:5px;
    margin:5px;
    color:#aaa;
}
.black ul li a{
    display:block;
    color:#f0f0f0;
}
.black ul li a:hover{
    text-decoration:none;
    color:#fff;
}
.white ul li{
    float:left;
    padding:5px;
    margin:5px;
    color:#aaa;
}
.white ul li a{
    display:block;
    color:#222;
}
.white ul li a:hover{
    text-decoration:none;
    color:#000;
}

We need to give the body a valid height, because we want to be able to define the height 100% to the section. With positioning the body absolutely and saying top:0px and bottom:0px we stretch the body and give it a height.

The style for the vertical page layout is going to look as follows:

*{
    margin:0;
    padding:0;
}
body{
    background:#000;
    font-family:Georgia;
    font-size: 34px;
    font-style: italic;
    letter-spacing:-1px;
}
.section{
    margin:0px;
    height:4000px;
    width:100%;
    float:left;
    text-shadow:1px 1px 2px #f0f0f0;
}
.section h2{
    margin:50px 0px 30px 50px;
}
.section p{
    margin:20px 0px 0px 50px;
    width:600px;
}
.black{
    color:#fff;
    background:#000 url(../images/black_vert.jpg) repeat-x bottom left;
}
.white{
    color:#000;
    background:#fff url(../images/white_vert.jpg) repeat-x bottom left;
}
.section ul{
    list-style:none;
    margin:20px 0px 0px 550px;
}
.black ul li{
    float:left;
    padding:5px;
    margin:5px;
    color:#aaa;
}
.black ul li a{
    display:block;
    color:#f0f0f0;
}
.black ul li a:hover{
    text-decoration:none;
    color:#fff;
}
.white ul li{
    float:left;
    padding:5px;
    margin:5px;
    color:#aaa;
}
.white ul li a{
    display:block;
    color:#222;
}
.white ul li a:hover{
    text-decoration:none;
    color:#000;
}

Nothing special here, just that we give a big height to the sections. The background image is positioned to the bottom left then.

Let’s add the JavaScript

The JavaScript

The function for the horizontal scrolling effect is the following:

$(function() {
	$('ul.nav a').bind('click',function(event){
		var $anchor = $(this);
		/*
		if you want to use one of the easing effects:
		$('html, body').stop().animate({
			scrollLeft: $($anchor.attr('href')).offset().left
		}, 1500,'easeInOutExpo');
		 */
		$('html, body').stop().animate({
			scrollLeft: $($anchor.attr('href')).offset().left
		}, 1000);
		event.preventDefault();
	});
});

And the function for the vertical scrolling effect is the following:

$(function() {
	$('ul.nav a').bind('click',function(event){
		var $anchor = $(this);

		$('html, body').stop().animate({
			scrollTop: $($anchor.attr('href')).offset().top
		}, 1500,'easeInOutExpo');
		/*
		if you don't want to use the easing effects:
		$('html, body').stop().animate({
			scrollTop: $($anchor.attr('href')).offset().top
		}, 1000);
		*/
		event.preventDefault();
	});
});

You can animate to the respective element by using one of the easing effects. You can see the effect in the vertical demo.
If there is no JavaScript enabled, we still have our good old scroll bars.

Check out the demo, it will lead you to the horizontal page. Here is the direct link to the demo of the vertical page scrolling, or simply click on the link in the horizontal demo.

View demoDownload source

Message from TestkingUsing testking E20-322 design guide and testking 642-533 live demos, learn how to create effective web applications and themes for your web page. Improve your website accessibility with testking 70-620 web designing course.
Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 212

Comments are closed.
  1. 5

    Hi Mary – nice effect. Just wanted to say well done with the site – I only recently came across Codrops and you have some great tutorials on here with some nice effects. Keep up the good work :-)

  2. 7

    Hey, great tut, i was really looking actually for this kind of layout.
    But i have a question, is it possible to have the same thing, without a scrollbar at the bottom?

  3. 10

    Not sure if this was mentioned but overflow:hidden on your body would get rid of the scroll bar and make it look abit nicer..

    Works awesome though

    • 11

      Hello all, thank you so much for your feedback! Yes, overflow- (x or y):hidden will make the scrollbar disappear but don’t forget that when JavaScript is disabled there is no way for the user to get to all the content then. But it sure looks much nicer! Cheers, ML

    • 12

      ehm, sorry, of course you can jump to the sections by clicking on the links :) …so actually there is no problem with it! Cheers, ML

  4. 16

    Hi, I am a newbie just graduating from web design school. I am curious, How do you move the actual menu. I am trying to understand and break this all down. I am using firebug and see that the nav is tucked in ul class called nav. Is the nav’s position on the page controlled in the javascript or is it controlled in the Css. I am trying to re-position it and use my own elements. Sorry if my question seems a little dumb to all of you excellent designers out there, but I hope to one day do great things.

    • 17

      @Ken There are no dumb questions, just dumb answers :) The style of the navigation ul is in the CSS. Just play around with the margins and see how it changes position. The ul itself is basically 100% wide and stretches over one whole section. You could, for example, make it float, like its li elements and position it where you need to. Hope it helps! Cheers, ML

  5. 18

    one of the way is set overflow(x or y):hidden in javascript instead of css, in this way, user who disable javascript still can get all content.

  6. 19

    Thanks so much for this tutorial!

    I noticed that when I turn on easing, when I click a link I see a quick “flash” or flicker of color. I.e. the black background flickers white for a split second, and vice-versa on the white pages.

    Is there a way to prevent this flickering, that I don’t see?

  7. 20

    Very nice, as always. I needed something like this for a design that wasn’t implemented. What the client wanted was a way to link to specific parts of the scrolled page, like an anchor. How would you add that here?

  8. 22

    Thanks for the great tutorial!

    I have a question: how can I make that scrolling starts not from the left, but from the center for example? So it opens in the middle, and then one can scroll left or right.

    Thanks in advance! Have been trying to figure it out for a while. :/

  9. 23

    im a little confused as to where you would put overflow-(x or y):hidden to make the scroll bar disappear, im very new to using code, and its just for my own website.

  10. 24

    Jayce,
    you could use this code in your stylesheet:

    html {overflow: hidden;}

Comments are closed.