-1

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

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

菜单结构：

这是我的页眉 这是我的菜单链接：索引、关于、联系人 这是我的页脚

4

3 回答 3

0

假设您要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 );
  });
});
于 2013-04-12T08:27:56.840 回答
0

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

于 2013-04-12T08:28:09.003 回答
0

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

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>

JS

$(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/

于 2013-04-12T08:42:16.077 回答