Smooth Scrolling in jQuery – Quick Tip

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

1. Vipin on July 15, 2013 at 9:23 am said:

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

   Log in to Reply
   • 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

     Log in to Reply
2. shainalee on June 3, 2013 at 6:32 am said:

   Great video capture. Explains it well 🙂 flowers puzzles

   Log in to Reply
3. Fernando Daciuk on June 2, 2013 at 2:07 pm said:

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

   Log in to Reply
4. Vasile Catalin on June 2, 2013 at 10:30 am said:

   Great screencast, thanks for the tip!

   Log in to Reply
5. joyleehan on June 1, 2013 at 8:33 am said:

   Wow, quick tip…Thanks for this 🙂 Europe puzzles

   Log in to Reply
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..

   Log in to Reply