How to Slow Down Scrolling Speed with JavaScript

How to slow down scroll to top speed?

Here is a pure Javascript solution. you may need to remove scroll-behavior: smooth style as this interrupts slow scrolling. in javascript scrollTo function provide the second parameters in milliseconds and function will take that much time to scroll to top.

JS code referred from the answer @ https://stackoverflow.com/a/23844067

var mybutton = document.getElementById("myBtn");
window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}
// Bind your button click, scroll direction and effect speed
document.getElementById("myBtn").onclick = function() {
  scrollTo(0, 8000); // it will take 8 seconds to reach to top.

}

// Element to move, time in ms to animate
function scrollTo(element, duration) {
  var e = document.documentElement;
  if (e.scrollTop === 0) {
    var t = e.scrollTop;
    ++e.scrollTop;
    e = t + 1 === e.scrollTop-- ? e : document.body;
  }
  scrollToC(e, e.scrollTop, element, duration);
}

// Element to move, element or px from, element or px to, time in ms to animate
function scrollToC(element, from, to, duration) {
  if (duration <= 0) return;
  if (typeof from === "object") from = from.offsetTop;
  if (typeof to === "object") to = to.offsetTop;

  scrollToX(element, from, to, 0, 1 / duration, 20, easeOutCuaic);
}

function scrollToX(element, xFrom, xTo, t01, speed, step, motion) {
  if (t01 < 0 || t01 > 1 || speed <= 0) {
    element.scrollTop = xTo;
    return;
  }
  element.scrollTop = xFrom - (xFrom - xTo) * motion(t01);
  t01 += speed * step;
  debugger;
  setTimeout(function() {
    scrollToX(element, xFrom, xTo, t01, speed, step, motion);
  }, step);
}

function easeOutCuaic(t) {
  t--;
  return t * t * t + 1;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible
  <strong>when the user starts to scroll the page</strong></div>

How to change scroll speed to be smooth?

Looks like the site is using SmoothScroll for websites JavaScript library with the following initialization parameters:

SmoothScroll({
    frameRate: 150,
    animationTime: 1000,
    stepSize: 100,
    pulseAlgorithm: 1,
    pulseScale: 4,
    pulseNormalize: 1,
    accelerationDelta: 50,
    accelerationMax: 3,
    keyboardSupport: 1,
    arrowScroll: 50,
    fixedBackground: 0
});

This library isn't related with WordPress (unless it is used by some WordPress plugin from this site) and you can use it at the any site regardless of its backend engine.

How to slow down scrolling speed with Javascript?

Scroll speed can't be altered as they are System configurations and Javascript shouldn't be allowed to alter a user's own settings.

But there are a lot of jquery custom scrollbars that you can use, which offer an option to change the scroll speed.
Examples: mCustomScrollbar, jquery slimscroll etc

Adjust the scrolling speed when scrolling by dragging

A little more elabouration from my comment: it seems like you are trying to dampen the scrolling speed. Mathematically, this means all you need is to reduce the value you feed to the .scrollTop() and .scrollLeft() functions. This can be done by dividing them by a set, arbitrarily determined factor, so that the transformation is linear. An example will be, if you want to dampen your scrolling speed by a factor of 10×, then you simply divide the values by 10:

var updateScrollPos = function(e) {
    var scrollTop = $(map).scrollTop() + (clickY - e.pageY);
    var scrollLeft = $(map).scrollLeft() + (clickX - e.pageX);

    $('html').css('cursor', 'row-resize');
    $(map).scrollTop(scrollTop / 10);
    $(map).scrollLeft(scrollLeft / 10);
}

Pro-tip: since you are accessing $(map) several times, you can (micro)optimize your code by caching it:

var updateScrollPos = function(e) {
    var $map = $(map);

    var scrollTop = $map.scrollTop() + (clickY - e.pageY);
    var scrollLeft = $map.scrollLeft() + (clickX - e.pageX);

    $('html').css('cursor', 'row-resize');
    $map.scrollTop(scrollTop / 10);
    $map.scrollLeft(scrollLeft / 10);
}

How do I slow down the default speed of smooth scroll using only Javascript?

You can't change the default scrolling speed.

What you can do is create your own scrolling function (with no jQuery)!

function scrollBy(element, value, duration, easingFunc) {  var startTime;  var startPos = element.scrollTop;  var clientHeight = element.clientHeight;  var maxScroll = element.scrollHeight - clientHeight;  var scrollIntendedDestination = startPos + value;  // low and high bounds for possible scroll destinations  var scrollEndValue = Math.min(Math.max(scrollIntendedDestination, 0), maxScroll)  // create recursive function to call every frame  var scroll = function(timestamp) {    startTime = startTime || timestamp;    var elapsed = timestamp - startTime;    element.scrollTop = startPos + (scrollEndValue - startPos) * easingFunc(elapsed / duration);    elapsed <= duration && window.requestAnimationFrame(scroll);  };  // call recursive function  if (startPos != scrollEndValue) window.requestAnimationFrame(scroll);}
var containerEl = document.getElementById("scroll-container");var scrollingDistance = window.innerHeight * 3;var scrollingTime = 1000;var easeInOutCubic = function(t) {  return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;}
scrollBy(containerEl , scrollingDistance , scrollingTime , easeInOutCubic )

html ,body, #scroll-container {height: 100vh; margin:0;}#scroll-container {overflow-y: scroll;position:relative; }section {height: 100%; display:block; position:relative; border-top: 1px solid black;}

<div id="scroll-container">  <section id="page1">    page1  </section>  <section id="page2">    page2  </section>  <section id="page3">    page3  </section>  <section id="page4">    page4  </section></div>

---

Related Topics