Question

点击''后，我试图在内容区域添加一个非常微妙的反弹效果，以黄色显示。我猜它会在javascript中完成吗？

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

Answer 1

您可以使用easing functions in Jquery UI。例如，clone of your jsFiddle使用easeOutBounce：

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

编辑：回答评论，选择最佳缓和功能当然是主观的，但如果您对Jquery提供的任何内容不满意，您可以自行制作。 Robert Penner's Easing Functions是一个很好的资源列表，可以开始探索，并且有一个example on Forrst.com。

Answer 2

正如@PauloAlmeida所说，你应该使用jQueryUI来添加更多的缓动函数。

但是，我建议动画top属性（因为它看起来不能在我的计算机上运行，因为它无法滚动那么多像素），并使用easeOutBack作为你的动画功能。

Here根据我的建议更新了小提琴。

添加javascript跳出效果

2 个答案: