我有以下从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>
scroll behavior: smooth
已经添加到CSS中了。我想控制它的时间。比如说,滚动到顶部的功能需要在8秒内完成。 - Maniac Piano