Question

为什么我的滚动到div 无效？错误在哪里？

这是代码模拟我的代码：Codepen

$(function() {
 $('a[href*=#]:not([href=#])').click(function() {
  var target = $(this.hash);
  target = target.length ? target : $('[name=' + this.hash.substr(1) +']');
  if (target.length) {
    $('html,body').animate({
      scrollTop: target.offset().top
    }, 1000);
    return false;
  }
 });
});

提前谢谢..

Answer 1

您应该使用：$("a[href*='#']").not("a[href='#']")或$("a[href*='#']:not([href='#'])")

$(function() {
 $("a[href*='#']").not("a[href='#']").click(function() {
  var target = $(this.hash);
  target = target.length ? target : $('[name=' + this.hash.substr(1) +']');
  if (target.length) {
    $('html,body').animate({
      scrollTop: target.offset().top
    }, 1000);
    return false;
  }
 });
});

工作示例：

＆＃13;

$(function() {
      $("a[href*='#']").not("a[href='#']").click(function() {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.substr(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    });
});

＆＃13;

#about, #top  {
  height: 100vh;
  padding: 10px;
  text-align: justify;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#top" id="bt-first">FIRST</a></li>
    <li><a href="#about" id="bt-about">ABOUT</a></li>
  </ul>
</div>
<section id="top">
  <h2>SECTION X</h2>
  <p>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>
</section>
<section id="about">
  <h2>ABOUT</h2>
  <p>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>
</section>
</div>

＆＃13;

Answer 2

这可能是因为您的<a>代码已使用#{section}作为href，这会导致页面立即跳转到这些锚点。在您的函数中使用e.preventDefault()单击链接时，可能需要阻止此行为。

您还需要调整选择器以使用引号以确保它们正常工作（documentation mentions that it works for quoted or unquoted values，但它通常可以更好地使用引号）：

// Added quotes to comparison selectors (this is usually necessary)
$('a[href*="#"]:not([href="#"])').click(function(e) {
    // Prevent any default link behavior (may be overkill in this scenario)
    e.preventDefault();
    // Omitted for brevity
});

您可以看到an updated CodePen here。

jQuery滚动到一个部分

2 个答案: