Adding a javascript bounce effect

Question

I'm trying to add a very subtle bounce effect to the content area, seen in yellow, after clicking the '. Im guessing it would be done in javascript?

JS Fiddle

HTML

<div class="block">
     <h2>This is green block is fixed</h2>

</div>
<div class="content" id="here">
    <div class="headerbar"> <a href="#here">Top / Reveal</a>
Sublte Bounce
    </div>
</div>

JS

$("a[href='#here']").click(function () {
    $("html, body").animate({
        scrollTop: $("body").scrollTop() == 0 ? 300 : 0
    }, "slow");
    return false;
});

so... what exactly is it that you want in addition to what it's already doing? — Kevin B, Jul 29 '13 at 20:11
If you're including the [jQuery bounce effect](http://api.jqueryui.com/easings/), you can just pass `"bounce"` as the third parameter to `animate`. — jbabey, Jul 29 '13 at 20:12

Paulo Almeida · Answer 1 · 2013-07-29T20:34:25.943

4

You can use the easing functions in Jquery UI. For instance, a clone of your jsFiddle using easeOutBounce:

$("a[href='#here']").click(function () {
    $("html, body").animate({
        scrollTop: $("body").scrollTop() == 0 ? 300 : 0
    }, "slow", "easeOutBounce");
    return false;
});

EDIT: Answering comments, choice of the best easing function is of course subjective, but if you are not happy with any of those provided by Jquery, you can make your own. Robert Penner's Easing Functions is a good list of resources to start exploring, and there's an example on Forrst.com.

edited Jul 29 '13 at 20:34

answered Jul 29 '13 at 20:13

Paulo Almeida

7,803
28
36

I would've thought `easeOutBack` would be a better choice. – Niet the Dark Absol Jul 29 '13 at 20:17
Is there anyway to tune this so I can define how much it bounces? – Rob Jul 29 '13 at 20:24
@Rob, See [this question](http://stackoverflow.com/questions/14707605/jquery-ui-easeoutbounce-needs-to-be-more-bouncy) – Paulo Almeida Jul 29 '13 at 20:38

score 0 · Answer 2 · answered Jul 29 '13 at 20:19

As @PauloAlmeida says, you should use jQueryUI to add more easing functions.

However, I would suggest animating the top property (because it looked like it wasn't working on my computer, because it couldn't scroll that many pixels), and using easeOutBack as your animation function.

Here is the Fiddle updated as per my suggestion.

Adding a javascript bounce effect

2 Answers2