LearnSmooth Scrolling in jQuery – Quick Tip

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.

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’);

    • Alex Wright on July 16, 2013 at 5:21 pm said:

      @Vipin jquery offset() returns an object with the properties of left and top.
      In your example, you could try:

      $('html, body').animate({scrollTop:$(faqId).offset().left}, 'slow');

      Hope it helps!

      For more on jquery offset: http://api.jquery.com/offset

  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

Learn to code with Treehouse

Start your 7 day free trial today and get access to hundreds of video courses in web development, design and business!

Learn more