div上的jquery滚动动画[重复]答案

【问题标题】：jquery scroll animation on div [duplicate]div上的jquery滚动动画[重复]
【发布时间】：2013-04-04 16:34:22
【问题描述】：

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

我的 jquery 知识不存在，所以我感谢所有的帮助。这是我正在谈论的网站：http://ma-jo.org/

菜单结构：

这是我的标题这是我的菜单链接：索引、关于、联系方式这是我的页脚

【问题讨论】：

为什么要删除标记？
因为显示不正确。
如果您认为自己得到正确答案，请接受其中一个答案:)
读出 jquery 的.animate() 函数并为相应的div 或html,body 设置动画。这里已经回答了很多问题。你也可以试试看。

标签： jquery html css scroll

【解决方案1】：

我猜不需要 jQuery。看看这个页面： http://www.echoecho.com/htmllinks08.htm

【讨论】：

这就是我现在拥有的，但我想添加一个动画。
@user2273523 您可以使用 jQuery.ScrollTo 插件添加动画。在下面检查我的答案:)

【解决方案2】：

以下内容可能会给您一个很好的起点。

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>

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

在 jsfiddle 上测试它：http://jsfiddle.net/TJr6k/

【讨论】：

我试试这个，谢谢

【解决方案3】：

假设您想通过动画滚动到DIV。您可以使用jQuery.ScrollTo Plugin 来完成此任务。

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

这就是你的做法：在<head></head> 标签中包含这两个 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

$(document).ready(function() {
  $('#menu_index a').click(function(){
    $('body').scrollTo( '#footer', 800 );
  });
});

【讨论】：

我试过了，但它不会为我的 div 设置动画，我不知道为什么。我唯一能想到的是因为我的菜单在另一个 div 中。
@user2273523 我已经更新了我的答案请检查:)