2

我是 javascript 的菜鸟，这可能是一个愚蠢的问题，但我编写了一个简单的 javascript 函数来滑动到网页上的特定元素。这是代码：http: //jsfiddle.net/bhbTr/

但是，当我尝试将 javascript 和 html 放在一个 html 文件中时，它似乎不起作用。这是我所拥有的：

<head>
    <title>Test</title>
    <link rel='stylesheet' id='css' href='style1.css' type='text/css' media='all'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">>
    function goToByScroll(id){
          // Remove "link" from the ID
            id = id.replace("link", "");
            var off = $("#"+id).offset().top - 50;
          // Scroll
            $('html,body').animate({
                scrollTop: off},
                'slow');
        }

    $("#navbar > ul > li > a").click(function(e) { 
          // Prevent a page reload when a link is pressed
            e.preventDefault(); 
          // Call the scroll function
        goToByScroll($(this).attr("id"));           
        });

    $("#navbar > a").click(function(e) { 
          // Prevent a page reload when a link is pressed
            e.preventDefault(); 
          // Call the scroll function
            goToByScroll($(this).attr("id"));           
        });
</script>
</head>

<body>
    <!-- Begin Wrapper -->
    <div id="wrapper">
        <div class="navbar" id="navbar">
            <a href="#" id="WhoWeArelink" class="navbarlogo">Test</a>
            <ul>
                <li><a id = "WhoWeArelink" href="#">Who We Are</a></li>
                <li><a id = "WhatWeDolink" href="#">What We do</a></li>
                <li><a id = "OurWorklink" href="#">Our Work</a></li>
                <li><a id = "Contactlink" href="#">Contact Us</a></li>
            </ul>
        </div>
        <div class="contentcontainer">
            <div class="WhoWeAre" id="WhoWeAre">
                <p class="header">uck</p>
                <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div class="WhatWeDo"id="WhatWeDo">
                <p class = "header">Projects</p>
                <p class="info">Projects</p>
            </div>
            <div class="OurWork" id="OurWork">
                <p class = "header">Resume</p>
                <p class="info">Resume</p>
            </div>
            <div class="Contact" id="Contact">
                <p class = "header">Contact</p>
                <p class="info">Contact</p>
            </div>
        </div>
</div>
<!-- End Wrapper -->
<!-- Begin Footer -->
<div class="footer">
        <p style="text-align:center;">Some bullshit copyright (c) insert year here</p>
</div>
<!-- End Footer -->
</body>

我不知道我做错了什么，但我怀疑这与链接没有调用的函数有关。如果有人有任何建议，我将不胜感激

4

2 回答 2

2

你需要做两件事。首先，取下第二个脚本标签上的额外右括号。

其次，包装您的 JavaScript 代码，使其在准备好文档时执行。您正在使用 jQuery，因此请使用以下代码片段：

<script type="text/javascript">
$(function() {
    function goToByScroll(id){
        // Remove "link" from the ID
        id = id.replace("link", "");
        var off = $("#"+id).offset().top - 50;
        // Scroll
        $('html,body').animate({
            scrollTop: off},
            'slow');
    }

    $("#navbar > ul > li > a").click(function(e) { 
        // Prevent a page reload when a link is pressed
        e.preventDefault(); 
        // Call the scroll function
        goToByScroll($(this).attr("id"));           
    });

    $("#navbar > a").click(function(e) { 
        // Prevent a page reload when a link is pressed
        e.preventDefault(); 
        // Call the scroll function
        goToByScroll($(this).attr("id"));           
    });
});
</script>

还有一些建议我必须改进您的代码。我会保持简单并处理这两件事。

首先，您可以将点击处理程序与单个逗号分隔的选择器结合起来。其次，您可以使用 this.id 从 click 函数中的元素中获取 id，无需使用 jQuery 函数访问 id 属性，它可以this在 click 处理程序中关键字代表的 HTML 元素上使用。

$("#navbar > ul > li > a, #navbar > a").click(function(e) { 
    // Prevent a page reload when a link is pressed
    e.preventDefault();
    // Call the scroll function
    goToByScroll(this.id);
});

我分叉了你的 jsFiddle 来演示 JavaScript 更改（没有修复脚本标签）：jsFiddle

我希望这会有所帮助！

于 2013-03-08T04:21:42.727 回答
0 
<script type="text/javascript">>

最后你有一个额外的尖括号。

于 2013-03-08T04:20:02.460 回答