LearnSmooth Scrolling in jQuery – Quick Tip

Avatar

Andrew Chalkley
writes on May 30, 2013

From start to finish, this quick tip with Andrew Chalkley will take you through an example using jQuery’s Smooth Scrolling on a FAQ page.

GET STARTED NOW

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Get Started

7 Responses to “Smooth Scrolling in jQuery – Quick Tip”

  1. how abt scrolling it horizontally… ?i tried below code.. but dint wrk 🙁
    $( ‘html, body’ ).animate({ scrollTop : $( faqId ).offset().right}, ‘slow’);

  2. shainalee on June 3, 2013 at 6:32 am said:

    Great video capture. Explains it well 🙂 flowers puzzles

  3. Nice tip! This works in Google Chrome / Safari / Firefox, but fail in IE. So, to work crossbrowser, just do it:

    $( ‘html, body’ ).animate({ $( faqId ).offset().top }, ‘slow’);

    And for best practices, use “event.preventDefault()” instead of “return false”;

    The complete code:

    $( ‘#faq a’ ).click( function( e ) {
    e.preventDefault();
    var faqId = $( this ).attr( ‘href’ );
    $( ‘html, body’ ).animate({ scrollTop : $( faqId ).offset().top }, ‘slow’);
    });

  4. Great screencast, thanks for the tip!

  5. joyleehan on June 1, 2013 at 8:33 am said:

    Wow, quick tip…Thanks for this 🙂 Europe puzzles

  6. Climberism on May 30, 2013 at 9:55 pm said:

    Nice Quicktip. Would be nice to add a scrolling “link to top” for those who have longer FAQs that would bring the user back to the top..

Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop