From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
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!
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
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.
thatnks for the great tute Mary Lou. I have used it in my porftfolio at http://keith-davidson.net.
Thanks for this. I don’t know how I found it, but this is by far THE easiest to understand tutorial for getting this effect. Here’s to you. Cheers.
Hi Mary.. thanks for your Great tutorials.. I used previously smooth.pack but I changed for jquery.easing In my new Web.
Check it out, i used the method in my web http://www.digitalevel.com
example of implementation of this tutorial.
How can I start from the 2 section like this site http://www.pojeta.cz/ thanks
Excellent tutorial and idea.One single problem though, the back/fwd button makes the page “jump” rather than use the easing script.I guess you can’t have them all.
ML, I wanted to know if I can combine both Vertical and Horizontal scroll. e.g section1 scrolling Vertical and section2 scrolling Horizontal.
Thanks a lot! I love you <3
Hey.. I’ve got everything working with the whole scrolling thing, but I can’t get it to scroll to the right place how do you define where it scrolls too Thanks!
Can’t get it to work with lightbox2 either :/
Amazing, I love your tutorials 😉
Hi,
I created a free theme for WordPress using this feature!!!
http://www.nerdhead.com.br/wordpress-theme-free/
Could anyone tell me how this one works?
http://www.jandk.fr/#qui_sont_jackson_and_kent
I wanted to use this effect but i wasnt able to figure out how it works.
Is this a special script or a combination of the vertical and horizontal scroll effect?
is it possible to have the ‘sections’ (horizontal scrolling) centered to the middle of the page, or would margin:auto stop the side-scrolling from functioning/produce unexpected results?
Thanks
Jamie
Hey Mary Lou is there a way to get both the horizontal and vertical working on the same site?
Also in case people are still curious I did manage to get the horizontal script centered
http://www.caffeinecreative.net/testlink/
email me if you have questions:
aaronmallen4@gmail.com
To center the individual page’s “content” area…add this styling:
position: relative;
margin: 0 auto;
Should work.
Hello,
I use your script for a website with both variants. You can scroll horizontal in the main nav an vertical in the subnav. It works perfect in FF, Opera and Safari. But in IE it won’t scroll vertical. Does anybody has an idea whats wrong and what I can do?
Thank you for an answer!
LK
Hello,
thx for the tutorial! Its great.. Does anybody know how to get the “#section” param from the flash button on release state? If I try to do it normally:
on (release)
{
getURL(“#section”, “_self”, “GET”);
}
and its only switching the sections without scrolling or easing. Any suggestion is appreciated a lot!
Thx
JP
Very nice tutorial, http://www.smoothdivscroll.com/ seems also great too me. Thanks!
What the heck is causing the list to display inline? I can’t override it with display:block, either.
Can this script scroll diagnally?
I have a question if it ok to ask =)
I want so bad to have smooth scrolling AND lightbox at the same time, is this possible to do? I know it interferes with each other of many cases but dunno how fix it so BOTH work together =( Could you help me?
thanks mary…. i like your tuts…. and i am very improve by codrops… this is my favorite site for jquery tuts and i like all jquery tuts submited by codrops… thanks very much for giving us very useful idea about jquery…… at last i love CODROPS….
I try to follow this,
i made 4 pages and my problem is, everytime the page load on first load, it goes to the last page,
how to make it showing the first page on first load ?
please advise
Can anyone help me please. I think I am probably over-thinking this WAY too much but I cant get this to work with my flash buttons. Is there any ways to do this? I have 3 buttons that are mini interactive flash animation than link to each corresponding page. How would I make this work with this type of Navigation? Is there a way? Please help if you have any ideas????
Thank you for sharing this awesome effect! I’m having trouble getting this to work on the site listed. I have this built into a fixed window (div) and would like to use the scrolling effect for each section, but it’s not working.
Could you please help by telling me what would make the scroller not work? Thank you!
I cannot seem to get this to work for me! I am trying to load each of my html pages in each div for the links but it will not work. How do I connect my other pages and get them to load in the divs? I know I need to change the code but I have no idea how to do this?
Great work! I love it! But is there a way to center each section/page? Right now it appears to be aligned left, and I’ve tried a few things but to no avail. I’ll admit I’m more of a designer over coder, so it might be eluding me. Any help would be GREATLY appreciated! Thanks!
How can I get the page to load at the top on browser refresh ?
Oooooh, very nice, been looking for this sort of effect for a while. I’m going to try and combine with a fixed navigation box, for kicks.
Great tutorial and very helpful! Quick question that I’m hoping someone can help with, is it possible to have everything except the nav options scroll? I’ve set my nav div on the right and the content div on the left, and I’d like to keep the nav div constant while the left content div scroll to the selected option. Have been trying to do this for the last couple hours but no success yet. Any help would be greatly appreciated!! Thanks!
Hello everyone,
how can I create a sort of navigation bar that can always be on the bottom or top and working for IE?
I mean something like this http://head2heart.us/
I’ve made it and it works on Firefox and Chrome, but not on IE. can someone help?
that’s is the code i’ve put on the CSS
#bar{
position:fixed;
bottom:0;
width:100%;
background-color:#CCC;
}
Do you know how I could add this to a wordpress site? I have tried everything.
thank you!
This is SWEET! Thanks for providing this and saving me a ton of time!
How do i move the NAV around the page. I don’t see an option in the style sheet? Please help. Thank you!
very nice script, thanks for sharing!
does anybody know if its possible to shift the scrolling so that its stops x amount of pixels to the left/right of the destination?
thanks again!
Hey Mary Lou,
Great script. I’ve been able to implement fairly quickly, but somewhere along the way the easing stopped working. I’ve read through the other comments and noticed several others with the same easing issues. Any ideas on what could be happening? I’m using the inline script with 1500 speed. I’m stumped.
Thanks again.
TripleAre
Love this! Is there a way, however, to load the content dynamically? So in other words you could have infinite pages loaded via ajax as the user scrolls?
I noticed that the height for each slider is determined by the slide with the largest height.
Is there a way to allow each slide to keep it’s own height?
Some slides are half the size, and I am using different colour backgrounds – so it’s fairly noticeable.
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!
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);
});
});
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 😀
background images hv disappeared..:( 🙁
Please solve my problem..
hello there…
how could i call this by a button
i mean by javascript … i need onclick event ….
help me out plz…
Look… I have ZERO idea about javascript, so if I manage to do it.. you’ll be my new idol e.e/)
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 🙂
Beautiful script ;o)
Is it possible to launch the effect from a fixed iframe?
Best method I have seen for this yet. Thanks millions