平滑滚动以通过滚动中断动画的能力锚定？

Question

我有这个 Jquery 的 sn-p 用于平滑滚动到锚点：

<li><a href="#home">Home</a></li>

带你去……

<a name="home"></a>

.

var $root = $('html, body');
$('a').click(function() {
var href = $.attr(this, 'href');
$root.stop().animate({
    scrollTop: $(href).offset().top
}, 500, function () {
    window.location.hash = href;
});
return false;
});

效果很好，但是如果你再次滚动，有没有办法停止动画，现在这必须完成 500 毫秒，并且在动画时尝试滚动时会变得紧张......

任何帮助都会很棒，谢谢！

Answer 1

这应该可行。从他对let user scrolling stop jquery animation of scrolltop?的回答中感谢@TomBates@

var $root = $('html, body');

$('a').click(function() {
  var href = $.attr(this, 'href');

  $root.stop().animate({
    scrollTop: $(href).offset().top
  }, 500, function() {
    window.location.hash = href;
  });

  return false;
});

$root.bind('scroll mousedown DOMMouseScroll mousewheel keyup touchstart', function(e) {
  if (e.which > 0 || e.type === 'mousedown' || e.type === 'mousewheel' || e.type === 'touchstart') {
    $root.stop();
  }
});

.home, .footer {
    width: 100%;
    height: 600px;
}

.home {
    background-color: #0FF;
}

.footer {
    background-color: #FF0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="home">
    <a id="home"></a>
</div>
<div class="footer">
    <a href="#home">Home</a>
</div>