LearnSmooth Scrolling in jQuery – Quick Tip

Andrew Chalkley
writes on May 30, 2013

Share with your friends


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 ) {
    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