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. 2

    To make the site start from a specific div like div 3 on when the website loads you do this to the script in your page:

    You add this to the top of your script above the function:

    $(‘html,body’).scrollTop(0);
    //0 is the amount of pixels from the top the div is positioned at, so just figure out the amount of the pixels to the div you want to start at

  2. 3

    Man, you’re so incredibly talented as a designer! I need a little of your talent! ;)Thanks for the post. Dimitri

  3. 5

    Same issue here as Phillip – on the iPad, it only works if you scroll slightly left or right before clicking on another link in the nav. After that it works fine.

  4. 9

    thank you for the script.

    can someone provide an example how to center align content using the horizontal script.

  5. 10

    How to center the pages??
    I’ve tried the following:

    position:fixed;
    TOP:200;
    width:100%;
    text-align:center;
    z-index:1;

    But the div will stay on his place instead of sliding together with the current page. I can’t seem to figure this out.

    How can I load content in the same page without sliding? (e.g. when i click on a different link)

  6. 11

    Hi, I am also having the same issue as Mike and Phillip when viewing the site through an iPad.

    I have created a static navigation outside of the main sections, when I use the static navigation to scroll to a new section it works fine, however when I attempt to use the nav again it doesn’t work. The only way it will work is if I scroll slightly with my finger first and then the nav seems to be enabled again, this just repeats everytime I use the navigation. However if the navigation is placed on every section then it works fine.

    Very strange (and frustrating)

    Can anybody help?

    Cheers

  7. 14

    is it possible to use more than three div layers? i need 9 for my website. can you help? (just copy&past the divs doesn’t work)

    btw: very nice tutorial! thx

  8. 16

    Could someone please please please tell me why is this doesn’t work in IE8? I used the SAME code as in the vertical sample. Just got rid of the style. It scrolls fine in all browsers BUT that pesky Microsoft browser. I am going insane and tearing my hair out. I can’t figure it out. Thank you!

    Untitled Document

    body {margin: 0; padding: 0;}

    .title {font-family: ‘Titan One’, cursive; font-size: 44px; text-shadow: 1px 1px 1px #aaaaaa; color: black; padding-left: 0px;}
    .section-wrapper {width: 880px; padding: 10px; margin-left: 160px;}
    #section1 {width: 100%; height: 800px; background: #ffffff url(‘../images/section1-bg.jpg’) no-repeat center top;}
    #section2 {width: 100%; height: 800px; background: #ffffff url(‘../images/section2-bg.jpg’) no-repeat center top;}
    #section3 {}
    #section4 {}

    $(function() {
    $(‘div.title a’).bind(‘click’,function(event){
    var $anchor = $(this);

    $(‘html, body’).stop().animate({
    scrollTop: $($anchor.attr(‘href’)).offset().top
    }, 800,’easeInOutExpo’);
    event.preventDefault();
    });
    });

    Healthy Habits

    Resolutions 2012

  9. 17

    I believe that the pages are not entirely auto resize.
    In the case of the vertical page scrolling, the css is “height:4000px”.
    How I can do to avoid working with fixed measures and keep it running all the same?

  10. 18

    Solved it. Took me over 4 hours to realize it, but I accidentally specified for the script tag: type=”application/javascript” as opposed to type=”text/javascript”. It worked in all browser BUT IE. Talking about wasting time!

  11. 19

    Hey, has anyone discovered how to make this work within a fixed div?

    I do not want my entire site to scroll, just one div’s contents.

Comments are closed.