如何減慢滾動到最高速度？

Question

我有以下從 w3schools 獲得的簡單scrollTop()函數。 我遇到的問題是設置滾動時間。 不同的人給出了不同的方法，每個人都從以下代碼中刪除了一行或所有行。 我正在等待可以添加的功能來設置滾動速度，並且不會刪除其他文本。 這是 codepen 工作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>

Answer 1

這是一個純 Javascript 解決方案。 您可能需要刪除scroll-behavior: smooth樣式，因為這會中斷慢速滾動。 在 javascript scrollTo函數中，以milliseconds提供第二個參數，函數將花費那么多時間滾動到頂部。

來自答案@https : //stackoverflow.com/a/23844067的JS代碼

 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>

Answer 2

您可以簡單地使用添加平滑滾動

html {
    scroll-behavior: smooth;
}

請注意，Safari 尚不支持它：/（在此處查看）

還有 Ferdinandi 的Smooth Scroll GitHub repo 我認為它有幫助，看看它和它的功能。