Papermashup

Subscribe


Tweets


"@KBedders @elerichardson I'm Free!!!!!! Call / Whatsapp me!!!"

@ashleyford 2 weeks ago

"@KBedders moomin!"

@ashleyford 2 weeks ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

jQuery page scrolling

AshleyAshley

Over a year ago I wrote an article on scrolling a page using Prototype, just to update things here I’m going to run through scrolling a page using jQuery and the animate() function. Automated page scrolling is useful in many cases. A good example of this technique can be found in the personal project i worked on a few months back ‘We Deliver’ which you can find here. The page scroll in this project was particularly important as it’s a single page site in that all the content and animation happens within a single user experience.

The Code

It’s extremely easy to get started using jQuery scroll. First we need to declare the element that the vertical scrollbar uses as it’s reference so in other words we want to scroll the main html body window for example.


$('html, body').animate({

The next line is saying scroll to the element defined (in this case the element .bottom) we’re not defining an offset so it takes the top of the element.


scrollTop: $(".bottom").offset().top

The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the very top, or if the element is not scrollable, this number will be 0.



$("document").ready(function() {

				$('.top-title').click(function(){

					$('html, body').animate({
						scrollTop: $(".middle").offset().top
					}, 2000);

				 });

				$('.middle-title').click(function(){

					$('html, body').animate({
						scrollTop: $(".bottom").offset().top
					}, 2000);

				 });

					$('.bottom-title').click(function(){

					$('html, body').animate({
						scrollTop: $(".top").offset().top
					}, 2000);

				 });

});

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 37
  • Mehdi Rizvandi
    Posted on

    Mehdi Rizvandi Mehdi Rizvandi

    Reply Author

    Thanks for sharing the code and demo
    good luck


  • jquery guide
    Posted on

    jquery guide jquery guide

    Reply Author

    its very useful codes, i will update in future.


  • Dale Knight
    Posted on

    Dale Knight Dale Knight

    Reply Author

    My page isn’t scrolling to quite the right place,

    how do I alter the scroll in pixels?


  • Wind
    Posted on

    Wind Wind

    Reply Author

    How do I use this when I’ve got tons of links? Instead of defining a whole new function for each link there’s gotta be a way to fetch the href target for each link and scroll to the target div?

    section1
    section2
    section3

    asdfsadfasdf
    asdfsadfasdf
    asdfsadfasdf


    • Wind
      Posted on

      Wind Wind

      Reply Author

      Wtf it just turned my code into links. How the heck do I post code in the comment box without it being deleted?


      • Ashley
        Posted on

        Ashley Ashley

        Author

        You need to wrap your code in code tags


      • nath
        Posted on

        nath nath

        Author

        can you tell me the code or link of having vertical scoroll for the page with out clicking on top/bottom buttons?


  • Higor Ernandes
    Posted on

    Higor Ernandes Higor Ernandes

    Reply Author

    Awesome job man, thank you!


  • rodolfo
    Posted on

    rodolfo rodolfo

    Reply Author

    HI, is possible giftme a copy of http://wedeliver.papermashup.com/ . please send me site clone for upload to my site with every modifications.
    My email rseales[at]yahoo[dot]com Thanksyou


  • Vladimir Volek
    Posted on

    Vladimir Volek Vladimir Volek

    Reply Author

    If you have problem with screen after clicking.

    try return false;

    example:

    $(‘.blog’).click(function(){
    $(‘html, body’).animate({
    scrollTop: $(“#blog”).offset().top
    }, 1000);
    return false;
    });


  • vb078
    Posted on

    vb078 vb078

    Reply Author

    Now I found two solutions thks :)


  • Sean
    Posted on

    Sean Sean

    Reply Author

    This is one of the most user friendly jquery plug-ins I’ve ever come across. Simple to implement & easy to adjust.
    Thanks.


  • clau
    Posted on

    clau clau

    Reply Author

    Many thanks it works perfectly!!


  • Andres
    Posted on

    Andres Andres

    Reply Author

    Hey Vindikato:
    $(function() {
    $(‘.nav a’).bind(‘click’,function(event){
    var anchor = $(this).attr(‘href’);

    $(‘html, body’).stop().animate({
    scrollLeft: $(anchor).offset().left
    }, 500);
    event.preventDefault();
    });
    });


    • Mobarak
      Posted on

      Mobarak Mobarak

      Reply Author

      Cierto pero fijate en la posciif3n de chico que este1s de espaldas a nosotros .La cabeza este1 cabizbajo-Algo debe ir mal para que tenga esa postura.Pero totalmente cierto he intrepretado el cuadro en funcif3n del libre albedredo no obstante creo que tus aformaciones son ciertas.


  • Vindikato
    Posted on

    Vindikato Vindikato

    Reply Author

    Very, very, very goooood stuff!

    I search a Horizontaly option… that is posible rigth here?
    Thanks :)


  • Jonny
    Posted on

    Jonny Jonny

    Reply Author

    I’m sorry to sound really amateur here but…
    How would I make the click function work with a <a href .. hyperlink …

    I see you've used Div classes and made them clickable.

    Help me out?


  • Luis A. Funebre
    Posted on

    Luis A. Funebre Luis A. Funebre

    Reply Author

    Thanks a lot men! saludos de Mexicali, Mexico :)


  • Isi
    Posted on

    Isi Isi

    Reply Author

    How would you use this in a naviagation?


  • Ben
    Posted on

    Ben Ben

    Reply Author

    Thanks Ashley. Came in quite handy. Appreciate your help.


  • Jonas
    Posted on

    Jonas Jonas

    Reply Author

    Strange behavior in IOS4 / Ipad – any ideas?


  • Vladimir Halinen
    Posted on

    Vladimir Halinen Vladimir Halinen

    Reply Author

    Hi!

    This works otherwise nicely, but I’m experiencing weird flashes before it starts to scroll. The flashing happens when I click the link. Any ideas why this happens? Ohter than that, it works great. Thanks!


  • David Lambert
    Posted on

    David Lambert David Lambert

    Reply Author

    This works great for a project I’m working on. It looked very smooth on FireFox and Safari.


  • CoryMathews
    Posted on

    CoryMathews CoryMathews

    Reply Author

    Works great in chrome however In Opera it jumps to the top of the screen before beginning to scroll. Not sure why that is.


  • Jonathan Kranz
    Posted on

    Jonathan Kranz Jonathan Kranz

    Reply Author

    Very nice! I can think of at least 3 areas where this functionality could be applied. Now, if only I can convince our fearless leaders to take something like this on…
    Thanks for posting!