jQuery滚动动画闪烁主屏幕瞬间

Question

我使用引导程序编写了一个菜单，该菜单使用JQuery滚动到页面的不同部分，但是在滚动之前一秒钟，主屏幕会闪烁。 我不知道为什么会发生或如何阻止它。

$("#butHome").click(function() {
$(".nav li").removeClass("active");
$(this).addClass("active");
$('html, body').animate({
    scrollTop: $("#home").offset().top
}, 300);
});
$("#but1").click(function() {
$(".nav li").removeClass("active");
  $(this).addClass("active");
$('html, body').animate({
    scrollTop: $("#section1").offset().top
}, 300);
});
$("#but2").click(function() {
$(".nav li").removeClass("active");
  $(this).addClass("active");
$('html, body').animate({
    scrollTop: $("#section2").offset().top
}, 300);
}); 
$("#but3").click(function() {
$(".nav li").removeClass("active");
  $(this).addClass("active");
$('html, body').animate({
    scrollTop: $("#section3").offset().top
}, 300);
});
$("#but4").click(function() {
$(".nav li").removeClass("active");
  $(this).addClass("active");
$('html, body').animate({
    scrollTop: $("#section4").offset().top
}, 300);
}); 

Answer 1

可能是因为锚链接使页面在动画开始之前滚动到页面顶部。 您可以通过在处理程序中添加以下内容来防止这种默认的浏览器行为：

$('.upp').click(function(e){
    e.preventDefault();
    $.scrollTo( '#up', 800 );
});

已复制