我有一个将页面向上抬起的按钮,但是当你点击它时,页面会急剧上升。我想增加平滑度。我该怎么做呢?我还想在向下滚动页面时添加此按钮的平滑外观
html
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
CSS
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
font-size: 18px;
}
#myBtn:hover {
background-color: #555;
}
js
mybutton = document.getElementById("myBtn");
function scrollFunction() {
console.log(document.body.scrollTop )
console.log(document.documentElement.scrollTop)
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20)
mybutton.style.display = "block";
else
mybutton.style.display = "none";
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
window.onscroll = function() {
scrollFunction()
}
scrollFunction();
将其添加到您的 CSS 中
html {
scroll-behavior: smooth;
}