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

Airic

016

发布于
2016-08-28

Sunny

5.3k155085

更新于
2016-08-29

新手上路，请多包涵

问题：实现返回顶部，但是只能第一次起作用。求解决啊！

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

html javascript css

阅读 2.5k

4 个回答

sivan_

✓ 已被采纳

启动一个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);

      }