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 page is going […]
scrollingWebsite

From our monthly sponsor: Create your beautiful portfolio website with Squarespace. Start your free trial.Advertisement

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.

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.

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.

http://www.codrops.com

Receive our bi-weekly Collective or official newsletter right in your inbox.

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. I have a question if it ok to ask =)
    I want so bad to have smooth scrolling AND lightbox at the same time, is this possible to do? I know it interferes with each other of many cases but dunno how fix it so BOTH work together =( Could you help me?

  2. thanks mary…. i like your tuts…. and i am very improve by codrops… this is my favorite site for jquery tuts and i like all jquery tuts submited by codrops… thanks very much for giving us very useful idea about jquery…… at last i love CODROPS….

  3. I try to follow this,
    i made 4 pages and my problem is, everytime the page load on first load, it goes to the last page,

    how to make it showing the first page on first load ?

    please advise

  4. Can anyone help me please. I think I am probably over-thinking this WAY too much but I cant get this to work with my flash buttons. Is there any ways to do this? I have 3 buttons that are mini interactive flash animation than link to each corresponding page. How would I make this work with this type of Navigation? Is there a way? Please help if you have any ideas????

  5. Thank you for sharing this awesome effect! I’m having trouble getting this to work on the site listed. I have this built into a fixed window (div) and would like to use the scrolling effect for each section, but it’s not working.

    Could you please help by telling me what would make the scroller not work? Thank you!

  6. I cannot seem to get this to work for me! I am trying to load each of my html pages in each div for the links but it will not work. How do I connect my other pages and get them to load in the divs? I know I need to change the code but I have no idea how to do this?

  7. Great work! I love it! But is there a way to center each section/page? Right now it appears to be aligned left, and I’ve tried a few things but to no avail. I’ll admit I’m more of a designer over coder, so it might be eluding me. Any help would be GREATLY appreciated! Thanks!

  8. Oooooh, very nice, been looking for this sort of effect for a while. I’m going to try and combine with a fixed navigation box, for kicks.

  9. Great tutorial and very helpful! Quick question that I’m hoping someone can help with, is it possible to have everything except the nav options scroll? I’ve set my nav div on the right and the content div on the left, and I’d like to keep the nav div constant while the left content div scroll to the selected option. Have been trying to do this for the last couple hours but no success yet. Any help would be greatly appreciated!! Thanks!

  10. Hello everyone,
    how can I create a sort of navigation bar that can always be on the bottom or top and working for IE?

    I mean something like this http://head2heart.us/

    I’ve made it and it works on Firefox and Chrome, but not on IE. can someone help?

    that’s is the code i’ve put on the CSS

    #bar{
    position:fixed;
    bottom:0;
    width:100%;
    background-color:#CCC;
    }

  11. How do i move the NAV around the page. I don’t see an option in the style sheet? Please help. Thank you!

  12. very nice script, thanks for sharing!

    does anybody know if its possible to shift the scrolling so that its stops x amount of pixels to the left/right of the destination?

    thanks again!

  13. Hey Mary Lou,
    Great script. I’ve been able to implement fairly quickly, but somewhere along the way the easing stopped working. I’ve read through the other comments and noticed several others with the same easing issues. Any ideas on what could be happening? I’m using the inline script with 1500 speed. I’m stumped.

    Thanks again.
    TripleAre

  14. Love this! Is there a way, however, to load the content dynamically? So in other words you could have infinite pages loaded via ajax as the user scrolls?

  15. I noticed that the height for each slider is determined by the slide with the largest height.

    Is there a way to allow each slide to keep it’s own height?

    Some slides are half the size, and I am using different colour backgrounds – so it’s fairly noticeable.