如何控制js导航滚动的速度

How to control the speed of js nav scrolling

本文关键字：导航 滚动 速度 js 何控制 控制      更新时间：2023-09-26

嘿，伙计们，我发现这个非常有用的java脚本粘边导航，它工作得很好!我不太了解js，我只是想知道是否有办法减慢滚动速度?

function redrawDotNav(){
  var topNavHeight = 50;
  var numDivs = $('section').length;
  $('#dotNav li a').removeClass('active').parent('li').removeClass('active');     
  $('section').each(function(i,item){
    var ele = $(item), nextTop;
    console.log(ele.next().html());
    if (typeof ele.next().offset() != "undefined") {
      nextTop = ele.next().offset().top;
    }
    else {
      nextTop = $(document).height();
    }
    if (ele.offset() !== null) {
      thisTop = ele.offset().top - ((nextTop - ele.offset().top) / numDivs);
    }
    else {
      thisTop = 0;
    }
    var docTop = $(document).scrollTop()+topNavHeight;
    if(docTop >= thisTop && (docTop < nextTop)){
      $('#dotNav li').eq(i).addClass('active');
    }
  });   
}

$('#dotNav li').click(function(){
  var id = $(this).find('a').attr("href"),
  posi,
  ele,
  padding = $('.navbar-fixed-top').height();
  ele = $(id);
  posi = ($(ele).offset()||0).top - padding;
  $('html, body').animate({scrollTop:posi}, 'slow');
  return false;
});
演示

在JavaScript代码中这样做:

$('html, body').animate({scrollTop:posi}, 'slow');

你可以把'slow'改成'fast'，看看有什么不同。

点击这里了解animate函数的更多信息

可以通过持续时间精确控制animate上的速度。下面是函数签名:

animate(params， [duration]， [easing]， [callback])

字符串fast和slow分别表示200ms和600ms的持续时间。默认速度为400ms。您可以通过将nnn替换为您想要的精确毫秒速度来调整您的速度。

$('html, body').animate({scrollTop:posi}, nnn);
相关文章：