javascript - jquery.animatescrollTop 函数不起作用

Question

我正在尝试在投资组合网站上使用 jQuery 学习动画滚动。我认为这在理论上应该可行，但我的按钮仍然只是“跳转”到其 href 而不是滚动。

JavaScript 包含在 $(document).ready(function() {}) 内容中:

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapse navbar-collapse" id="navbarResponsive">
  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <a class="nav-link" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#about">About Me</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#skills">Skills</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#projects">My Projects</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#contact">Contact Me</a>
    </li>
  </ul>
</div>

我希望这会滚动到带有这些 id 的部分，而不是跳转。

Answer 1

首先使用preventDefault()停止默认的ahref操作，应该没问题

// added e parameter to click callback
$('a[href*="#"]:not([href="#"])').click(function(e) {
  // use prevent default function
  e.preventDefault()
  var target = $(this.hash);
  if (target.length) {    
    $('html, body').animate({scrollTop: target.offset().top}, 1000);
  }       
});`

您正在激活 <a> 的默认操作标签，这样浏览器就没有时间动画滚动，因为你已经在那里了。