javascript - 前端，实现返回顶部，但是只能第一次起作用
本文介绍了javascript - 前端，实现返回顶部，但是只能第一次起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
问题：实现返回顶部，但是只能第一次起作用。求解决啊！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.top {
width: 150px;
height: 150px;
background:red;
position: fixed;
right: 0;
bottom: 10px;
display:none;
}
</style>
<body>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
<div class="top" id="goTop"></div>
<script>
var goTop = document.getElementById("goTop");
window.onscroll = function () {
if(window.pageYOffset > 100){
goTop.style.display = "block";
}
}
goTop.onclick = function () {
var start =window.pageYOffset,target =0,timer=null;
timer = setInterval(function () {
start +=(target - start)/10;
window.scrollTo(0,start);
if(start == 0) {//永远不能为0？
console.log(start);
clearInterval(timer);
}
},10);
}
</script>
</body>
</html>解决方案
启动一个setInterval，然后永远没有满足清除setInterval的条件，setInterval在无限的执行下去，所以只有第一次起到作用。
start +=(target - start)/10;您这段代码，每次都减去start自身的1/10，start永远不会等于零，只会无限接近于零。
按您的思路，代码大体应该是这个逻辑：
goTop.onclick = function () {
var start =window.pageYOffset,wStart=0,timer=null;
wStart=start;
timer = setInterval(function () {
wStart -= start/10;//新增一个变量用来接收,避免使用同一个变量导致start永远不为0
window.scrollTo(0,wStart);
if(wStart == 0) {//有可能为负数，此处用<=更为合适
goTop.style.display = "none";
console.log(wStart);
clearInterval(timer);
}
},10);
}这篇关于javascript - 前端，实现返回顶部，但是只能第一次起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
