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 cant figure out how to get the vertical parallax scroll to start and stop where I want.

    I tried:

    $(document).ready(function() {
    $(‘html,body’).scrollTop(0); //0

    but it didnt work!

  2. hey guys i tried this effect in a different way … but not too different that it doesnt work :/
    what i did was this… i made a div with the id=horizontal and set a height of 350px … within that div i placed my sections and i tried the jquery but it doesnt work 🙁 please help … this is the code for jquery

    $(function(){
    $(“li a”).click(function(event){
    var $anchor = $(this);

    $(“#horizontal”).stop().animate({
    scrollLeft: $($anchor.attr(‘href’)).offset.left
    }, 1000);
    });
    });

  3. Hi, great stuff! I was wondering though if there is a way to include a previous and next button and have it scroll page by page using these buttons instead of clicking the number tabs?

    Looking forward to your response 😀

  4. hello there…
    how could i call this by a button
    i mean by javascript … i need onclick event ….

    help me out plz…

  5. Look… I have ZERO idea about javascript, so if I manage to do it.. you’ll be my new idol e.e/)

  6. Thank you thank you very much for this awesome tutorial. I really wanted to learn how to acheive this smooth scroll effect. Thanks, helped me alot keep up the good work 🙂

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

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

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

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

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

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

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

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

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