Question

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

$(document).ready(function() {})中包含了javascript：

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

您可以尝试关注。

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

Answer 2

使用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>标记的默认操作，因此浏览器没有时间为滚动动画，因为您已经在那里。

jQuery .animate scrollTop函数不起作用

2 个答案: