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.
LearnSmooth Scrolling in jQuery – Quick Tip
7 Responses to “Smooth Scrolling in jQuery – Quick Tip”
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
how abt scrolling it horizontally… ?i tried below code.. but dint wrk 🙁
$( ‘html, body’ ).animate({ scrollTop : $( faqId ).offset().right}, ‘slow’);
@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
Great video capture. Explains it well 🙂 flowers puzzles
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’);
});
Great screencast, thanks for the tip!
Wow, quick tip…Thanks for this 🙂 Europe puzzles
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..