Javascript 视差转换，在两个锚/div之间有细微的反弹

我正试图在我的网站上有一个链接，链接到“下方折叠区域”，我将在那里有一个简单的联系方式；这个想法是让这个链接做一个很好的过渡，类似于js视差，一旦它到达折叠区域的下方，它就会微妙地“反弹”几个像素。（锚之间的间距约为800px）

我在下面的代码中进行了尝试，但它仍然只是作为一个锚点进行读取，没有任何转换。（我应该加载不同的jQuery库，还是以不同的顺序加载它们？）

更新尝试12-16:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

在头脑中呼唤

正在调用的库：

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

我在这里做错了什么？有一天，当我得到这一点后，我将试图找出如何实现“轻松”，并在它导航到点后进行微妙的反弹

感谢您的帮助

试试这个：

<script type="text/javascript">
    $(function() {
        // this should really be in a click handler, but just for an example:
        $('html,body').animate({
            scrollTop: $("#testtop").offset().top
        }, 2000, 'bounce');
    });
</script>

$（函数（）{
//这实际上应该在单击处理程序中，但仅举一个例子：
$（'html，body'）。设置动画({
scrollTop:$（“#testtop”）.offset（）.top
}，2000年，“反弹”）；
});

---

注意：

bounce

参数指定要使用的缓和。这是的一部分，因此您需要下载它并将其包含在您的页面中，以使其正常工作。

由于某种原因，在我输入代码后，它花了几分钟才开始工作，但最终它解决了，我认为这就是解决方案：

#top, #bottom {
    height : 130px;
    border : 0px solid #000;
    overflow:hidden;
}

---

有很多内置的

尝试对您的小提琴进行此修改-

---

非常感谢您的回复！但我还是不明白，上面是我目前的最新问题。我打赌如果你不接受自己的答案，你会有更好的机会得到帮助。人们可能会认为这个问题的答案是绿色的大复选标记。

.scrollpls {
    height : 500px;
    border :0px solid #000;
}

<script type="text/javascript">
    $(function() {
        // this should really be in a click handler, but just for an example:
        $('html,body').animate({
            scrollTop: $("#testtop").offset().top
        }, 2000, 'bounce');
    });
</script>

#top, #bottom {
    height : 130px;
    border : 0px solid #000;
    overflow:hidden;
}

$('a').on('click', function (event) {
    event.preventDefault();//stop the browser from jumping to the anchor
    var href  = $(this).attr('href'),
        oset  = $(href).offset().top;
    $('html, body').stop().animate(
        {
            scrollTop : oset
        },
        1000,
        'easeInOutElastic',
        function ()
        {
            location.hash = href;
        }
    );
});