Tips for managing the velocity of JavaScript navigation scrolling

Hey everyone, I recently discovered this incredibly helpful JavaScript sticky side navigation script and it works like a charm! However, since I don't know much about JS, I was wondering if there's a way to slow down the scrolling speed?

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

Check out the demo here

Answer №1

The specific line within your JavaScript script responsible for that action is as follows:

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

If you alter the speed from 'slow' to 'fast', you will notice a difference in the scrolling behavior.

For further information on the animate function, visit this page.

Answer №2

You have the ability to easily manage the speed of animations using the animate function in jQuery by adjusting the duration. The following is the function signature:

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

You can specify durations using the strings fast for 200ms and slow for 600ms. The default duration is set to 400ms. If you want a different speed, simply replace nnn with the desired exact speed in milliseconds.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on concealing modal popup when the page refreshes successfully

I implemented a progress modal popup to show progress for page reloads. This script is set to the master page and injects the progress modal popup when the form submit event is fired: <script type="text/javascript"> function ...

What is the best way to create a deep clone of an XMLDocument Object using Javascript?

I am currently working on a project that involves parsing an XML file into an XMLDocument object using the browser's implementation of an XML parser, like this: new DOMParser().parseFromString(text,"text/xml"); However, I have encountered a situatio ...

Jasmine is having trouble scrolling the window using executeScript

I usually use the following command: browser.driver.executeScript('window.scrollTo(0,1600);'); However, this command is no longer working. No errors are showing in the console, making it difficult to troubleshoot. Interestingly, the same scri ...

Creating aesthetically pleasing URLs from data: A simple guide

Can someone help me transform this data into a pretty URL? I am looking for something similar to Appreciate the assistance! :) var x = {data1, data2, data3}; $.ajax({ url: 'https://mywebsite.com/admin/leads/count/', data: x, type: &a ...

When clicked, the menu disappears successfully with the "show" functionality, but unfortunately, the "hide" feature is not working as intended

Within my menu, I have a section for portfolios that transforms into a dropdown on desktop hover and mobile click. The issue arises on mobile devices where the first click displays the menu correctly, but subsequent clicks do not trigger any change. I att ...

Deleting an item from a JSON object using Angular

Whenever I click on an item in the list, it generates an input text and adds the attributes of that input to a JSON. Currently, each time I click on an item multiple times, the JSON accumulates all the clicks. For instance, if I click 3 times on the first ...

Number entered isn't visible in Bootstrap modal window

Can anyone help me troubleshoot why the value "APno" is not appearing next to "Appointment Number" in a Bootstrap modal despite the modal showing up? This is my code: Form <form method="POST> Appointment Number:<br> <input type="n ...

Enhanced spacing of characters in website text

Currently working on a client's website, I find myself once again being asked by my boss (who is the designer) to increase letter-spacing in the text for aesthetic reasons. However, I strongly believe that this practice can actually lead to eye strain ...

Creating a div element that maintains a consistent aspect ratio regardless of its width or height

I've been working on making my player div responsive in terms of height. Currently, when I resize the width, the div scales down accordingly. However, resizing the height does not have the same effect. The scrollbar doesn't seem to help either du ...

Ways to modify color while user moves the screen

I'm working with some jQuery code that changes the colors of elements as the user scrolls down, and I want it to revert back to the original color when scrolling back up. However, the script is not behaving as expected... Here is the original working ...

Struggling to display the Three.js LightMap?

I'm having trouble getting the lightMap to show on my mesh. Here's the code I'm using: loader.load('model.ctm', function (geometry) { var lm = THREE.ImageUtils.loadTexture('lm.jpg'); var m = THREE.ImageUtils.loadT ...

Tips for incorporating form validation into a modal in ASP.NET MVC

My task involves designing a form within a modal window with one mandatory field. The user should be able to submit the form only after filling out the required field; if left empty, an error message must display. What is the best approach to implement t ...

What is the best way to position an image in the center of the screen with uniform margins around it?

Could someone please help me figure this out? I've been attempting for some time but can't seem to make it work with the bottom margin. This website in the fashion industry showcases what I'm trying to achieve: It's designed to be resp ...

The slider in Foundation 5 displays precision up to two decimal points

<div class="range-slider round" data-slider="1" data-options="display_selector: #questions_off_count; initial: 1; end: 4 ;"> <span class="range-slider-handle" role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="4" aria-valuenow=" ...

Error message: "Named export cannot be identified"

My file structure looks like this: routes auth login index.js Login.jsx routes.js Within the routes.js file, I have the following code snippet: import { Route } from 'react-router-dom'; import { Login } from './login ...

Executing javascript code that has been inserted into inner HTML is not functioning as expected

Trying to retrieve a response from another page, specifically named ajaxresponse.php, through an AJAX request. I also aim to execute some JavaScript actions on that ajaxresponse.php page, but the JavaScript code is not functioning as expected. Although I a ...

What are the steps to integrate <br> in a JavaScript code?

I have recently started learning about web development and I'm facing a challenge with this implementation. var obj = [[{ name: "John", age: 30, city: "New York"}, { name: "Ken", age: 35, city: "New Orleans"}]]; ...

"Integrating Vuetify into a single-spa Vue application: Step-by-step

vue 2.6.14 vuetify 2.6.9 What is the process for integrating vuetify into a vue application? I am attempting to import my project into another project as a microfrontend application, but encountering issues. Here are the steps I followed: Create-single- ...

How to implement a delay for submenu dropdown in Bootstrap 3

I am trying to implement a delay on a submenu that I have created, rather than the entire bootstrap3 dropdown menu. The goal is to allow users to easily move their cursor to the submenu without it closing unexpectedly. Although the jquery code should still ...

Importing a 3D Model Using Three.js

I've been trying to import a 3D model by following tutorials. I managed to successfully import using A-Frame Tags, but encountering issues with Three.js. The code snippets are from a tutorial on YouTube that I referred to: https://www.youtube.com/watc ...