使用jQuery滚动页面不起作用

Question

javascript的新增功能，试图创建一个简单的程序，当单击导航项时滚动到div。 但是，它不起作用，我不知道为什么。

这是代码段：

  $(document).ready(function() { alert("asda"); setBindings(); }); function setBindings() { $("nav a").click(function(e) { // stops the a tags for working.. ie 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的链接也是正确的。 我尝试重新检查动画功能，但无法指出问题所在。 有任何想法吗？

Answer 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> 

Answer 2

尝试此滚动。

$('#your_image_for_the_scroll').click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
    });

用户确实向下滚动后，该图像可能会出现：

$(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);
        }
    });

Answer 3

主要是因为错字。 函数末尾有一个额外的) ＆ }

我创建了一个JSFIDDLE ，它在这里工作

Answer 4

正如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>