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 […]

From our sponsor: Sign up for Mailchimp today.

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:

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 212

Comments are closed.
  1. I was trying for a long time how to do this and now found what was it!!….tank you sooo mucho

  2. Hey Mary Lou, I know you haven’t commented in a while but I need your help with something.
    I have a fixed nav bar on the top of the page. So when I scroll (vertically) to a section, it goes underneath my navbar.

    Is there a way I can set it to offset the scroll so it stops 80 pixels early?

  3. Hello thanks a lot for this tuto !
    Just one question ! I tried to use this scroll way but in a div, not in all the page.

    I added 2 divs to replace the ‘html’ and the ‘body’. I changed the caracters in the script I thought. And from now, the anchors are working in a very strange way !

    Can I use this tuto for a croll in a div (overflow:auto) ?
    And what I have to change in the script to it works well ?

    Sorry for my english (I’m french) and i hop I made it clear
    Quentin

  4. Hi!, just want to know how can I start in the middle of the web?, for example on the section 3? (on the vertical script).. thank u !

  5. The scrolling works but I need to have an offset of 100px from the top to accommodate my navigation. Can anyone help???

  6. This is great tutorial, and i have already implemented.. but i don’t want my navigation bar to be positioned with ul. I want to make it with div tags(fixed). Have anyone idea how to do this and keep all functionality of webpage?

  7. I’ve already solved this “problem” 🙂
    This: $(‘ul.nav a’)….. i changed with the id of my div tag(“id=idiv”): $(‘#idiv.nav a’) Very easy, however thank you for the tutorial…

  8. really smart tut Mary Lou one more congrats

    I have the same question with @Babuzz though and it appears his was unanswered…is mine going to have the same luck?!

    Locally everything is working smooth as a butter…Online (when uploaded on the server) the code is not.

    Would you have any idea what might be wrong please?

    thanks in advance for your time!

  9. would it be possible to mix the horizontal and vertical, to create a simple version of designinsocial.com?

  10. 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…?

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

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

    tnx

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

    • 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

  14. 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!

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

  16. 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]

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

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

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

  20. 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!

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

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

  22. 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!

  23. 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 🙂

  24. 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?

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

  26. 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!

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

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

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

  30. thank you for the script.

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

  31. 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)

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

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

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

  35. 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?

  36. 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!

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