我是 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>
我不知道我做错了什么，但我怀疑这与链接未调用的函数有关。如果有人有任何建议，我将非常感激
最佳答案
您需要做两件事。首先，去掉第二个脚本标签上多余的右括号。
其次，包装您的 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 属性，它可以直接在 HTML 元素上使用 this 关键字代表在点击处理程序中。
$("#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);
});
我 fork 了你的 jsFiddle 来演示 JavaScript 更改(没有修复脚本标记):jsFiddle
希望对您有所帮助!
关于javascript - 在html中放置和调用javascript函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15286571/