Question

并且我已经编辑了相当数量的CSS，当我尝试在Chrome中进行测试时，我注意到当我点击左上角的链接并尝试向下滚动时，我没有滚动这种奇怪的摇晃不稳的效果。

我认为我在编码时做错了所以我回到了下载目录中的原始模板和模板的网站实时预览中，它仍然显示相同的错误。

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

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

如何摆脱它，有没有办法找出造成它的原因？谢谢你的帮助。

Answer 1

问题是下面的脚本（下面是代码）。

单击该链接时，.animate()功能正在执行1.5秒，即使您已经位于页面顶部，也会自动滚动到页面顶部。因此，点击链接后，当您尝试向下滚动时JavaScript会向上滚动，从而为您提供生涩效果。

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

我确信有一种方法可以在您点击页面顶部后立即停止.animate()功能，但我不确定这样做的最佳方式......也许是其他人可以帮助这一部分。

这是经典的“它是一个功能，而不是一个错误”的场景之一。

<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();
    });
});

Bootstrap 3 - Chrome中的生涩滚动

1 个答案: