如何减慢回到顶部的滚动速度？

Question

我有以下从w3schools获得的简单scrollTop()函数。我的问题在于设置滚动时间。不同的人给出了不同的方法，并且每个人都删除了以下代码中的一行或多行。我正在等待一个可以添加以设置滚动速度而不删除任何其他文本的函数。这是代码pen工作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>

- Maniac Piano

---

阅读此链接：https://dev59.com/_5Hea4cB1Zd3GeqPjwvo#33686560 - LahiruTM

请查看scrollTo函数，设置behavior: 'smooth'，您需要确认所需的浏览器兼容性：https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo - Emilio

@LahiruTM，我看到了。但是我已经提到我只想在以下代码中进行添加。你能为我添加一些代码吗？ - Maniac Piano

@emiliokyp，scroll behavior: smooth已经添加到CSS中了。我想控制它的时间。比如说，滚动到顶部的功能需要在8秒内完成。 - Maniac Piano

这可能会有用：https://dev59.com/k2ox5IYBdhLWcg3w3YH- - Emilio

将Jquery加载到脚本部分。然后在顶部功能中注释掉两行并添加以下内容：***$（'html，body'）.animate（{scrollTop：0}，'slow'）;*** - LahiruTM

Answer 1

这里有一个纯JavaScript解决方案。你可能需要去掉`scroll-behavior: smooth`样式，因为它会干扰缓慢的滚动。在JavaScript中，`scrollTo`函数提供第二个参数以毫秒为单位，函数将花费相应的时间滚动到顶部。

JS代码引用自答案@https://dev59.com/k2ox5IYBdhLWcg3w3YH-#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>

- sandeep joshi

Answer 2

animated-scroll-to 它运行良好。

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

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

- Joohyoung Park

Answer 3

你可以使用以下方法轻松添加平滑滚动效果

html {
    scroll-behavior: smooth;
}

请注意，Safari目前还不支持 :/ (在这里检查)

另外，我认为Ferdinandi的Smooth Scroll GitHub存储库会有帮助，只需查看一下其功能即可。

- Mehdi Shahamirian

Answer 4

这是使用JavaScript减慢滚动速度的解决方案

对我有用

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

- Gulshan Prajapati

---

有趣的方法，但即使滚动速度设置为1.0，它仍然比正常速度慢。 - user566245