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.
Nice! Did you see also our examples of smooth scrolling?
Centratissimo http://centratissimo.musings.it which is a little experimental as far as navigation is concerned; and http://www.festeggiano.it which is more traditional but smooth as well. have fun!
Very nice examples!! I love the auto resize 🙂 Cheers, ML
always give brand new on an idea
nice.. muy buen blog siempre dando buenas ideas.. gracias..
ty
Hi Mary – nice effect. Just wanted to say well done with the site – I only recently came across Codrops and you have some great tutorials on here with some nice effects. Keep up the good work 🙂
Hi Chris, thank you very much, I am glad you like Codrops!
Hey, great tut, i was really looking actually for this kind of layout.
But i have a question, is it possible to have the same thing, without a scrollbar at the bottom?
As usual, Mary great tuts here. This is my favorite site. Thanks!!
I just love the way it slides. Thanks so much for the tut.
Not sure if this was mentioned but overflow:hidden on your body would get rid of the scroll bar and make it look abit nicer..
Works awesome though
Hello all, thank you so much for your feedback! Yes, overflow- (x or y):hidden will make the scrollbar disappear but don’t forget that when JavaScript is disabled there is no way for the user to get to all the content then. But it sure looks much nicer! Cheers, ML
ehm, sorry, of course you can jump to the sections by clicking on the links 🙂 …so actually there is no problem with it! Cheers, ML
excellent, will it really craft:))
I vote for Easing Plugin 🙂
Excelent! Clean and Perfect!
Hi, I am a newbie just graduating from web design school. I am curious, How do you move the actual menu. I am trying to understand and break this all down. I am using firebug and see that the nav is tucked in ul class called nav. Is the nav’s position on the page controlled in the javascript or is it controlled in the Css. I am trying to re-position it and use my own elements. Sorry if my question seems a little dumb to all of you excellent designers out there, but I hope to one day do great things.
@Ken There are no dumb questions, just dumb answers 🙂 The style of the navigation ul is in the CSS. Just play around with the margins and see how it changes position. The ul itself is basically 100% wide and stretches over one whole section. You could, for example, make it float, like its li elements and position it where you need to. Hope it helps! Cheers, ML
one of the way is set overflow(x or y):hidden in javascript instead of css, in this way, user who disable javascript still can get all content.
Thanks so much for this tutorial!
I noticed that when I turn on easing, when I click a link I see a quick “flash” or flicker of color. I.e. the black background flickers white for a split second, and vice-versa on the white pages.
Is there a way to prevent this flickering, that I don’t see?
Very nice, as always. I needed something like this for a design that wasn’t implemented. What the client wanted was a way to link to specific parts of the scrolled page, like an anchor. How would you add that here?
uhh, love the tut. although, where are the background images?
Thanks for the great tutorial!
I have a question: how can I make that scrolling starts not from the left, but from the center for example? So it opens in the middle, and then one can scroll left or right.
Thanks in advance! Have been trying to figure it out for a while. :/
im a little confused as to where you would put overflow-(x or y):hidden to make the scroll bar disappear, im very new to using code, and its just for my own website.
Jayce,
you could use this code in your stylesheet:
html {overflow: hidden;}
Wow, nice effect! Thanks.