引导模板jquery动画bug

Bootstramp template jquery animation bug

本文关键字：动画 bug jquery      更新时间：2023-09-26

我使用这个模板为我的网站http://www.bootply.com/100702但是当你点击菜单选项时，动画菜单会有bug和延迟。

点击链接后，页面错误位置闪烁，并显示动画

我怀疑问题出在这段代码中:

/* smooth scrolling for nav sections */
$('#nav .navbar-nav li>a').click(function(){
  var link = $(this).attr('href');
  var posi = $(link).offset().top+20;
  $('body,html').animate({scrollTop:posi},700);
})

此代码需要使用点击之间的延迟或其他方法来改进动画吗?

这个bug来自于滚动时ScrollSpy激活。添加spy-activated类

<div class="navbar navbar-custom navbar-inverse navbar-static-top spy-activated" id="nav">

瞄准类

$('body').scrollspy({ target: '.spy-activated' })

滚动时切换间谍激活。记得手动调整li元素上的"active"类

/* smooth scrolling for nav sections */
$('#nav .navbar-nav li>a').click(function(){
  $("#nav").removeClass("spy-activated");
  $(this).parent().siblings().each( function(){ $(this).removeClass("active"); });
  $(this).parent().addClass("active");
  var link = $(this).attr('href');
  var posi = $(link).offset().top+20;
  $('body,html').animate({scrollTop:posi},700, function(){
     $("#nav").addClass("spy-activated");
  });
})

bootp: http://www.bootply.com/YmaEAbUWEf

我在这段代码中发现了一个bug。

你需要使用

  e.preventDefault();

禁用section的默认用法。正确的代码:

$('#nav .navbar-nav li>a').click(function(e){
  var link = $(this).attr('href');
  var posi = $(link).offset().top;
  e.preventDefault();
  $('body,html').animate({scrollTop:posi},700);
});
相关文章：