我的页面上有一个滚动到顶部按钮，但是当我单击它时，它不会滚动到顶部，它只是直接带我到顶部，就像我加载了一个新页面一样，但我需要的是滚动动画。
javascript
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").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;
}
css
#myBtn {
display: none;
position: fixed;
bottom: 50px;
right: 20px;
z-index: 99;
border: teal;
outline: none;
background-color: #FF6347;
color: white;
cursor: pointer;
padding: 0px;
border-radius: 100px;
width: 40px;
height: 40px;
}
#myBtn i {
width: 40px;
height: 40px;
text-align: center;
z-index: 100;
line-height: 40px;
color: white;
}
#myBtn:hover {
background-color: #FF6320;
}
html
<button1 onclick="topFunction()" id="myBtn" title="Go to top"><i class="fa fa-angle-double-up" aria-hidden="true"></i></button1>
Your topFunction()跳转到页面顶部。你真正想要的是多次跳转，例如向上 20px。并且，为了防止它发生得太快，请添加超时。我修改了你的代码来制作一个工作示例。
虽然我建议使用容器 div 进行操作，而不是检查(document.body.scrollTop > step || document.documentElement.scrollTop > step)。设置元素并使用element.scrollTop会更干净（对于不同的浏览器也更安全）。
var step = 20;
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > step || document.documentElement.scrollTop > step)
document.getElementById("myBtn").style.display = "block"
else
document.getElementById("myBtn").style.display = "none"
}
function topFunction() {
if (document.body.scrollTop > step || document.documentElement.scrollTop > step) {
document.body.scrollTop -= step
document.documentElement.scrollTop -= step
setTimeout(function() {
topFunction()
}, step)
} else {
document.body.scrollTop = 0
document.documentElement.scrollTop = 0
}
}
#myBtn {
display: none;
position: fixed;
bottom: 50px;
right: 20px;
z-index: 99;
border: teal;
outline: none;
background-color: #FF6347;
color: white;
cursor: pointer;
padding: 0px;
border-radius: 100px;
width: 40px;
height: 40px;
}
#myBtn i {
width: 40px;
height: 40px;
text-align: center;
z-index: 100;
line-height: 40px;
color: white;
}
#myBtn:hover {
background-color: #FF6320;
}
<div style="width:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<button onclick="topFunction()" id="myBtn" title="Go to top"><i class="fa fa-angle-double-up" aria-hidden="true"></i></button>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
