CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3674887
user3674887

Reputation: 3

How to control the speed of js nav scrolling

Hey Guys I found this really useful java script sticky side nav, and it works great! I don't much about js, i was just wondering if there was away to slow down the scrolling?

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

demo

Upvotes: 0

Views: 646

Answers (2)

Drakes
Drakes

Reputation: 23660

You can precisely control the speed on animate with duration. Here is the function signature:

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

The strings fast and slow can be supplied to indicate durations of 200ms and 600ms, respectively. The default speed is 400ms. You can adjust your speed by replacing nnn with the exact speed in milliseconds you want.

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

Upvotes: 0

lmgonzalves
lmgonzalves

Reputation: 6588

The line in your JavaScript code doing that is this:

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

You can change the 'slow', to 'fast', and see the difference.

Learn more about the animate function here.

Upvotes: 1

Related Questions