首页 > 前端,实现返回顶部,但是只能第一次起作用

前端,实现返回顶部,但是只能第一次起作用

问题:实现返回顶部,但是只能第一次起作用。求解决啊!

<!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);

      }
【热门文章】
【热门文章】