javascript的新手，尝试创建一个简单的程序，在单击导航项时滚动到div。但是，它不起作用，我无法弄清楚原因。
以下是摘录：
$(document).ready(function() {
alert("asda");
setBindings();
});
function setBindings() {
$("nav a").click(function(e) {
// stops the a tags for working.. i.e. clicking to another page. Functions stops the functionality.
var sectionID = e.currentTarget.id + "Section";
alert('button id ' + sectionID);
$("html body").animate({
scrollTop: $("#" + sectionID).offset().top
}, 1000)
})
})
}<nav class="clearfix">
<div class="logo-container">
<i><h2><b>DELIVERY MOTION</b></h2></i>
</div>
<ul class="clearfix">
<li><a id="delivery" href="#">Delivery</a></li>
<li><a id="about" href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Login</a></li>
</ul>
<a href="#" id="pull">Menu</a>
</nav>
<div id="deliverySection">
<h1> Order anything from anywhere in Karachi instantly at your doorstep. </h1><hr>
<div id='fee-estimate-box'>
<form id='fee-estimate-form' action="#">
<legend id='delivery-text'>Delivery Fee Calculator</legend>
<span>FROM </span> <input type="text" name="firstname" value="PICKUP ADDRESS">
<span>TO </span> <input type="text" name="lastname" value="DROP ADDRESS">
<span>ESTIMATED FEE </span> <input type="text" name="estimated-fee" value="0.00 PKR">
<input class='btn-submit' type="submit" value="BOOK NOW!">
</form>
</div>
<div id='silver-bar'>
<img src='img/red-car.png' alt='fast deliver'>
</div>
</div>
<div id="aboutSection">
<h2> How it works </h2>
<div class="container">
<div class="row">
<div class="col-sm-2" id="infobox">
<img src='img/map-icon.png' width="50px" height="50px">
<h3> Search </h3>
<h4>Select pickup address </h4>
</div>
<div class="col-sm-2">
<br><br>
<img src='img/arrow-up.png' width="50px" height="50px" class='arrows-img'>
</div>
<div class="col-sm-2" id="infobox">
<img src='img/delivery-icon.png' width="50px" height="50px" class="order-icon-img">
<h3> Order</h3>
<h4>Make a booking online </h4>
</div>
<div class="col-sm-2">
<br>
<img src='img/arrow-down.png' width="50px" height="50px" class='arrows-img'>
</div>
<div class="col-sm-2" id="infobox">
<img src='img/truck-icon.png' width="50px" height="50px">
<h3> Delivered</h3>
<h4>Instant courier delivery</h4>
</div>
</div>
</div>
</div>
起初我认为问题出在我的jquery上，但它的工作正常。 javascript的链接也是正确的。我已经尝试重新检查动画功能，但我无法确定问题。有什么想法吗？
答案 0 :(得分：1)
$（“html body”）必须替换为$（“html，body”）才能触发滚动。 你的javascript中也有错误，最后还有一个'}）'。 现在没关系。检查您的控制台是否存在此类错误，或使用代码片段，如您的问题所示。
$(document).ready(function() {
// alert("asda");
setBindings();
});
function setBindings() {
$("nav a").click(function(e) {
var sectionID = e.currentTarget.id + "Section";
// alert('button id ' + sectionID+ $("#" + sectionID).offset().top);
$("html,body").animate({
scrollTop: $("#" + sectionID).offset().top
}, 1000);
})
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="clearfix">
<div class="logo-container">
<i><h2><b>DELIVERY MOTION</b></h2></i>
</div>
<ul class="clearfix">
<li><a id="delivery" href="javascript:;">Delivery</a></li>
<li><a id="about" href="javascript:;">About Us</a></li>
<li><a href="javascript:;">Services</a></li>
<li><a href="javascript:;">FAQ</a></li>
<li><a href="javascript:;">Contact</a></li>
<li><a href="javascript:;/">Login</a></li>
</ul>
<a href="#" id="pull">Menu</a>
</nav>
<div id="deliverySection">
<h1> Order anything from anywhere in Karachi instantly at your doorstep. </h1><hr>
<div id='fee-estimate-box'>
<form id='fee-estimate-form' action="#">
<legend id='delivery-text'>Delivery Fee Calculator</legend>
<span>FROM </span> <input type="text" name="firstname" value="PICKUP ADDRESS">
<span>TO </span> <input type="text" name="lastname" value="DROP ADDRESS">
<span>ESTIMATED FEE </span> <input type="text" name="estimated-fee" value="0.00 PKR">
<input class='btn-submit' type="submit" value="BOOK NOW!">
</form>
</div>
<div id='silver-bar'>
<img src='img/red-car.png' alt='fast deliver'>
</div>
</div>
<div id="aboutSection">
<h2> How it works </h2>
<div class="container">
<div class="row">
<div class="col-sm-2" id="infobox">
<img src='img/map-icon.png' width="50px" height="50px">
<h3> Search </h3>
<h4>Select pickup address </h4>
</div>
<div class="col-sm-2">
<br><br>
<img src='img/arrow-up.png' width="50px" height="50px" class='arrows-img'>
</div>
<div class="col-sm-2" id="infobox">
<img src='img/delivery-icon.png' width="50px" height="50px" class="order-icon-img">
<h3> Order</h3>
<h4>Make a booking online </h4>
</div>
<div class="col-sm-2">
<br>
<img src='img/arrow-down.png' width="50px" height="50px" class='arrows-img'>
</div>
<div class="col-sm-2" id="infobox">
<img src='img/truck-icon.png' width="50px" height="50px">
<h3> Delivered</h3>
<h4>Instant courier delivery</h4>
</div>
</div>
</div>
</div>
答案 1 :(得分：0)
尝试这个，滚动。
$(window).scroll(function () {
if ($(this).scrollTop() >= 20) { // If page is scrolled more than 20px
$('#your_image_for_the_scroll').fadeIn(200);
} else {
$('#your_image_for_the_scroll').fadeOut(200);
}
});
用户向下滚动一下后，可能会出现此图像：
pacman -S mingw-w64-$(uname -m)-gcc答案 2 :(得分：0)
主要是因为拼写错误。有一个额外的)＆amp;功能结束时}
我创建了一个JSFIDDLE，它正在这里工作
答案 3 :(得分：0)
正如OP指出的那样，没有javascript工作。我们都应该更加聪明，因为锚是常见的。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="clearfix">
<div class="logo-container">
<i><h2><b>DELIVERY MOTION</b></h2></i>
</div>
<ul class="clearfix">
<li><a id="delivery" href="#">Delivery</a></li>
<li><a id="about" href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Login</a></li>
</ul>
<a href="#" id="pull">Menu</a>
</nav>
<div id="deliverySection">
<h1> Order anything from anywhere in Karachi instantly at your doorstep. </h1><hr>
<div id='fee-estimate-box'>
<form id='fee-estimate-form' action="#">
<legend id='delivery-text'>Delivery Fee Calculator</legend>
<span>FROM </span> <input type="text" name="firstname" value="PICKUP ADDRESS">
<span>TO </span> <input type="text" name="lastname" value="DROP ADDRESS">
<span>ESTIMATED FEE </span> <input type="text" name="estimated-fee" value="0.00 PKR">
<input class='btn-submit' type="submit" value="BOOK NOW!">
</form>
</div>
<div id='silver-bar'>
<img src='img/red-car.png' alt='fast deliver'>
</div>
</div>
<div id="aboutSection">
<h2> How it works </h2>
<div class="container">
<div class="row">
<div class="col-sm-2" id="infobox">
<img src='img/map-icon.png' width="50px" height="50px">
<h3> Search </h3>
<h4>Select pickup address </h4>
</div>
<div class="col-sm-2">
<br><br>
<img src='img/arrow-up.png' width="50px" height="50px" class='arrows-img'>
</div>
<div class="col-sm-2" id="infobox">
<img src='img/delivery-icon.png' width="50px" height="50px" class="order-icon-img">
<h3> Order</h3>
<h4>Make a booking online </h4>
</div>
<div class="col-sm-2">
<br>
<img src='img/arrow-down.png' width="50px" height="50px" class='arrows-img'>
</div>
<div class="col-sm-2" id="infobox">
<img src='img/truck-icon.png' width="50px" height="50px">
<h3> Delivered</h3>
<h4>Instant courier delivery</h4>
</div>
</div>
</div>
</div>