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

<强> COPIED

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

1 个答案: