jQuery 的滚动页面不起作用

Question

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 的链接也是正确的。我试过重新检查动画功能，但无法确定问题所在。有什么想法吗？

Answer 1

试试这个，用于滚动。

$('#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 2

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

jQuery 的滚动页面不起作用

Scrolling Page with jQuery not working

javascript

jquery

jquery-animate