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

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

Which newsletter would you like to receive?

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

    How can i add my header with links in one frame and the scroling content in other frame? I tried, but links don’t work, and my page doesn’t scroling Has anyone idea please…?

  2. 2

    What I’m wondering is if there’s a way to get one div to move while the div it’s contained it stays put. so you get a conveyor belt effect.

  3. 3

    great!!! How can I a mixed navigation? Vertical and horizontal in the same project? What I’ve to change???

    tnx

  4. 4

    I’ve solve it…

    $(function() {
    $(‘ul.nav a.vertical ‘).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();
    });
    $(‘ul.nav a.horizontal ‘).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 we’ve to put vertical or horizontal in the link class… bye

    • 5

      can u explain how can i put horizontal and vertical in link class. i also want to mix horizontal and vertical scrolling but i’m not getting u how can i do it.
      can u put the css code here or if not can you please explain in detail

  5. 6

    I am trying to achieve exactly what Garrett Casey mentioned, sliding content divs within a static background div, controlled by buttons outside the sliding divs. Anybody know how/if this is possible at all? Thanks!

  6. 7

    EHAB, I actually have a jquery plugin that will do it, I just don’t have the knowledge to implement it.

  7. 8

    To those who wanted their div to appear in the center of the screen (given that it is not the size of the window, duh), here’s the very slightly modified code
    [code]
    $(function () {
    $(‘a’).bind(‘click’, function (event) {
    var $anchor = $(this);
    $(‘html, body’).stop().animate({
    scrollLeft: $($anchor.attr(‘href’)).offset().left – ($(window).width() – $($anchor.attr(‘href’)).width()) / 2
    }, 1500, ‘easeInOutExpo’);
    event.preventDefault();
    });
    });
    [/code]

  8. 9

    Anyone knows how do I get rid of that stupid gamertag picture for my avatar >.> it seems to follow me

  9. 10

    Thanks ML for this tutorial. I’m very new to programming and I’m having problems with adding the vertical ease effect. Does anyone know what I’m doing wrong. I’m working in Dreamweaver. Its seems like I can’t get the script to work.

  10. 11

    Im trying to have 1 link move down vertical and another link to move horizontal in the same page. Can someone help me out? I tried what Alice did but its not working. this is what my html for 1 section looks like

    <a href=”#section1″ rel=”nofollow”>Home</a>
    Portfolio
    <a href=”#section3″ rel=”nofollow”>Resume</a>
    <a href=”#section4″ rel=”nofollow”>Contact</a>

    <a href=”#section5″ rel=”nofollow”>test</a>

  11. 12

    Great script. Would love to know if anyone figured out how to give the script a starting top offset. I have a fixed header and the content goes underneath it. I know a couple people asked this already. Please help!

  12. 13

    Guys, sorry for not answering all of you. I promise I will try to make a new tutorial soon, with all your questions solved 🙂 Cheers, ML

    • 14

      ma’am can u tell me how can i make a webpage in which i can navigate page both horizontally and vertically

  13. 15

    Thanks Mary Lou, very nice.

    I am wondering if I can start the page at a specific section instead of the top-left corner of the page.
    And can the sections be centered horizontally and vertically to accommodate all screen resolutions (including iPhone/iPad etc)

    Thanks from Amsterdam!

  14. 19

    Hi, I am working on a mobile site which has this script installed with a fixed menu. Problem – you can’t seem to be able to navigate to another section unless you move off the point you have previously scrolled to… do you know how to fix this by any chance? Phillip 🙂

  15. 20

    Thanks for the tutorial, its really helpful!

    I’m trying to figure out how to navigate left and right using the arrow keys to trigger the scrollTo each section. Is there a simple way to incorporate that or is that a whole new tutorial?

  16. 22

    I got error on the site I am building. TypeError: ‘null’ is not an object (evaluating ‘w.parentNode’)… anyone knows how to fix it?

  17. 23

    Hi, I’ve been trying to implement horizontal and vertical smooth scrolling, vertical is working absolutely fine but the horizontal doesn’t seem to be, I used the script that Alice had posted and applied the classes correctly to the html but it just doesn’t seem to work for horizontal, any ideas? Thanks in advance for any help!

Comments are closed.