jquery在div上滚动动画

当我按下菜单栏中的链接时，我想使用锚向该div滚动

我的jquery知识是不存在的，所以我感谢所有的帮助。 这就是我所说的网站：

菜单结构：

这是我的头球 以下是我的菜单链接：索引、关于、联系 这是我的页脚

---

假设您想要滚动到带有动画的

DIV

。您可以通过使用来完成此任务

这个网站有一些不错的演示，你可以查看

以下是您的操作方式： 在

标记中包含这两个jquery文件

<script src="http://code.jquery.com/jquery-1.9.1.min.js">   <!--JQuery 1.9.1 (Latest) JS-->
<script src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"> <!--Scroll to Plugin-->

---

我想不需要jQuery。查看此页面：

---

以下内容可能会为您提供一个良好的起点

HTML

<div id="container">
    <div id="header">
    </div>
    <div id="menu">
        <div id="menu_index">
        <a href="#content_index">index</a>
        </div>
        <div id="menu_overOns">
        <a href="#content_overOns">over ons</a>
        </div>
        <div id="menu_contact">
        <a href="#content_contact">contact</a>
        </div>
    </div>
    <div id="content_all">
        <div id="content_index">
        <a href="#menu">Index</a>
        </div>
        <div id="content_overOns">
        <a href="#menu">overOns</a>
        </div>
        <div id="content_contact">
        <a href="#menu">Contact</a>
        </div>
    </div>
    <div id="footer">
    </div>
</div>

---

在JSFIDLE这里测试它：

为什么要删除标记？因为它没有正确显示。如果您认为您得到了正确的答案，请接受其中一个答案：）读出jquery的

.animate（）

函数，并对相应的

div

或

html，body

设置动画。这里已经回答了很多问题。你也可以试试。这就是我现在拥有的，但我想添加动画。@user2273523你可以使用jQuery.ScrollTo插件添加动画。检查我下面的答案：）我试过了，但它不能使我的div动画化，我也不知道为什么。我唯一能想到的是因为我的菜单在另一个分区。@user2273523我已经更新了我的答案，请检查：）我会试试这个，谢谢

<div id="container">
    <div id="header">
    </div>
    <div id="menu">
        <div id="menu_index">
        <a href="#content_index">index</a>
        </div>
        <div id="menu_overOns">
        <a href="#content_overOns">over ons</a>
        </div>
        <div id="menu_contact">
        <a href="#content_contact">contact</a>
        </div>
    </div>
    <div id="content_all">
        <div id="content_index">
        <a href="#menu">Index</a>
        </div>
        <div id="content_overOns">
        <a href="#menu">overOns</a>
        </div>
        <div id="content_contact">
        <a href="#menu">Contact</a>
        </div>
    </div>
    <div id="footer">
    </div>
</div>

$(document).ready(function() {
    $('#menu a').on('click', function(ev) { 
        var dest = $(this).attr('href');
        $('#content_all').animate({scrollTop: $(dest).position().top },'slow'); 
        ev.preventDefault();
    });
});