Question

我有这个Jquery片段可以平滑滚动到一个锚点：

<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毫秒，当它试图滚动时会变得紧张... [/ p>

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

Answer 1

这应该有效。感谢@TomBates对let user scrolling stop jquery animation of scrolltop?

的回答

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>

平滑滚动以锚定能够使用滚动中断动画？

1 个答案: