jQuery .animate scrollTop函数不起作用

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

您可以尝试关注。

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