CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Nullqwerty
Nullqwerty

Reputation: 1168

Smooth Scroll on a Web Page

Currently on my site (with Bootstrap) when a user clicks on an anchor with a link to the same page, I use the following jquery to make it scroll to the link, rather than jump:

jQuery('html,body').animate({scrollTop: jQuery('#target').offset().top}, 1000);

It works, but, I've seen some sites that use an animation that starts off slower and then speeds up as it scrolls and almost has a little bounce at the end. It's very smooth/slick. I'm looking to achieve something similar.

Anyone know of other ways to animate scrolling via links? I'd prefer to avoid jquery plugins if possible.

Thanks

Upvotes: 0

Views: 431

Answers (2)

Pete TNT
Pete TNT

Reputation: 8403

The default easing of jQuery is swing and the only vanilla option is linear.

While you said you'd prefer not to use plugins, easy option would be including jQueryUI easings into the project. It offers tons of options, look into the easings page and choose the one you prefer if swing doesn't satisfy (or make your own!). jQueryUI's Effects core weights in at 13kb's.

Upvotes: 1

Let'sTalk
Let'sTalk

Reputation: 443

Add easing to the animate method

jQuery('html,body').animate({scrollTop: jQuery('#target').offset().top}, {duration: 1000, easing: 'easeOutBounce' });

*untested

Docs here: http://api.jquery.com/animate/

Examples here: http://www.learningjquery.com/2009/02/quick-tip-add-easing-to-your-animations/

Upvotes: 1

Related Questions