问题:实现返回顶部,但是只能第一次起作用。求解决啊!
<!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>
你的回到顶部。。。好复杂啊。
写代码养成良好的注释习惯,特别是寻求帮助的时候。
看了一下,你是想在回到顶部的过程中,再滚动的话就停止是吧。但是你想一下,当你的window.pageYoffset是21时,下一次的start不就是2.1了?继续下去肯定永远不能为0了。
一般这种问题就用一个取范围比较,计较点还可以扩展成一个回弹效果。
楼主的这种方法,当你重新滚动到底部的时候在window.scroll中修改你的start值
在<body>后面放个a的锚点不就可以返回顶部了嘛,干什么要那么麻烦
启动一个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);
}