How to slow down scroll to top speed?

Question

I have the following simple scrollTop() function obtained from w3schools. The issue i have is setting the time for scrolling. Different people gave different methods and everyone removed one or all lines from the following code. I'm waiting for a function which can be added to set the scrolling speed and no other text is to be removed. Here's the codepen work https://codepen.io/vkdatta27/pen/zYqQbmM

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

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}

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;
}
html {
  scroll-behavior: smooth
}

<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>

Read this https://stackoverflow.com/questions/33686523/how-to-make-slow-the-scroll-top-speed/33686560 — LahiruTM, Oct 03 '20 at 04:27
Check out the scrollTo function, setting behavior: 'smooth', you'll need to confirm your required browser compatibility: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo — Emilio, Oct 03 '20 at 04:30
@LahiruTM, I've seen that. But i have already mentioned that i want to make only additions in following code. Cam you make amy additions in following code? — Maniac Piano, Oct 03 '20 at 04:32
@emiliokyp, `scroll behavior: smooth` is already added in the css. I want to control it's time. See, example, the scroll top function needs to happen in 8 seconds — Maniac Piano, Oct 03 '20 at 04:35
This might be useful: https://stackoverflow.com/questions/8917921/cross-browser-javascript-not-jquery-scroll-to-top-animation — Emilio, Oct 03 '20 at 04:42
Load Jquery in script section. then comment two lines in top function and put this. ***$('html,body').animate({ scrollTop: 0 }, 'slow');*** — LahiruTM, Oct 03 '20 at 04:43

score 3 · Accepted Answer · edited Oct 03 '20 at 07:21

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>

score 0 · Answer 2 · answered Oct 03 '20 at 07:10

You can simply add the smooth scroll using

html {
    scroll-behavior: smooth;
}

Note that it's not supported by Safari yet :/ (check here)

Also there is Smooth Scroll GitHub repo by Ferdinandi I think it helps, just take a look at it and it's features.

score 0 · Answer 3 · answered Feb 18 '22 at 08:26

0

animated-scroll-to it works find.

https://www.npmjs.com/package/animated-scroll-to

animateScrollTo(el as Element, {
    elementToScroll: elContainer,
    speed: 100,
}).then();

answered Feb 18 '22 at 08:26

Joohyoung Park

1
2

score 0 · Answer 4 · answered Apr 07 '23 at 08:11

Here is the solution to slow down the scroll speed by using javascript

This work for me

// Set the scroll speed factor
let scrollSpeed = 0.5;

// Add an event listener for the 'wheel' event
document.addEventListener('wheel', function(event) {
  // Prevent default scrolling behavior
  event.preventDefault();

  // Calculate the new scroll position
  let delta = event.deltaY;
  let scrollPosition = window.scrollY + (delta * scrollSpeed);

  // Set the new scroll position
  window.scrollTo({
    top: scrollPosition,
    behavior: 'smooth'
  });
}, { passive: false });

interesting approach, but even with scrollSpeed of 1.0 it is slower than normal — user566245, Aug 02 '23 at 14:12

How to slow down scroll to top speed?

4 Answers4