Question

我正在尝试让我的页面在点击href时滚动到特定的<section>。我已经能够将页面跳转到我希望它的<section>，但它并不顺畅（就像我的.animate在jQuery中不起作用）。

HTML

<li><a href="#about" class="about-link">about us</a></li>

<section class="about" id="about">
    <div class="container">
        <h1>about us</h1>
        <p>text</p>
    </div>
</section>

的jQuery

$(document).ready(function(){
  // Add smooth scrolling to all links
  $(".about-link").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});

提前致谢！

Answer 1

您可以使用下面的元素\n制作动画。

id

Answer 2

$(document).ready(function() {
  // Add smooth scrolling to all links
  $(".about-link").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;
      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function() {

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});

您的代码没有任何问题。这是我建造的jsfiddle示范。如您所见，它运作良好。

以下是需要考虑的事项：

确保您的工作区中确实有jquery。
确保您有足够的空间滚动（我假设您这样做，而您刚刚发布了一个代码段）

我希望你设法让它发挥作用！

jQuery滚动不是动画

2 个答案: