Bootstrap 3- Chrome中的快速滚动

Question

我已经编辑了相当多的CSS，当我尝试在Chrome中测试它时，我注意到当我点击左上角的链接并试图向下滚动时，我得到了这个奇怪的抖动效果。

我想我在编码中做错了什么，所以我回到了下载目录中的原始模板，并在模板的网站上进行了实时预览，但它仍然显示相同的错误。

你可以在这里的实时预览中看到它(它比我发布jsfiddle链接还快)- bootstrap freelance tempalte

单击左上角的链接并尝试向下滚动，您应该会看到错误。在Firefox中，网站不会移动或摆动，当你向下滚动鼠标滚轮时，它会保持“冻结”状态。当您再次滚动时，问题会消失。

我如何摆脱它，有没有办法确定是什么导致了它？谢谢你的帮助。

Answer 1

问题出在下面的脚本(以及下面的代码)。

当您单击该链接时，.animate()函数将执行1.5秒以自动滚动到页面顶部，即使您已经位于页面顶部。所以点击链接后，JavaScript会向上滚动，而你试图向下滚动，这会给你带来颠簸的效果。

删除此代码将解决此问题，但随后您将失去轻松的页面滚动功能。

我确信有一种方法可以在页面顶部立即停止.animate()函数，但我不确定这样做的最佳方法是什么……也许其他人能帮上忙。

这是一个经典的“它是一个特性，而不是一个bug”的场景之一。

<script src="js/freelancer.js"></script>

// jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('.page-scroll a').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});