JS回顶特效

效果图

HTML

<span id="top">span>
<p>今天天气好p>
……
还有一坨的p，为了可以滚动

CSS

   *{
      margin: 0;
      padding: 0;
      border: none;
      list-style: none;
    }
    body{
      background-color: #cccccc;
    }
    p{
      margin-bottom: 20px;
      text-align: center;
    }
    #top{
      width: 40px;
      height: 40px;
      background:url("图片/six1.jpg") no-repeat;
      position: fixed;
      right: 10px;
      bottom: 10px;
      -webkit-background-size: 100%;
      background-size: 100%;
      display: none;
    }

JS

事件分析

页面滚动（onscroll），图标显示
图标点击（onclick），回到顶部

特效

由于点击图标后，是一个缓动回顶的过程

所以需要用到缓动动画

缓动动画：定时器、起始位置、终点位置、缓动系数

定时器：先清后设置，最后需要清除

原理

滚动条滚动到的位置为动画的起点，滚动的长度就为begin
终点位置为0
缓动公式：begin=begin+(end-begin)*0.2;

需要的值

1、滚动的长度
2、图标

还需要加上一个处理兼容性问题的函数

 window.onload = function () {
    //1、监听窗口的滚动
    var scrollTop=0;
    var span=document.getElementById("top");
    var timer=null,begin=0,end=0;
    window.onscroll = function () {
       //1.获取滚动高度
      scrollTop=scroll().top;
      //2.盒子的显示
      if(scrollTop<=0){
          span.style.display="none";
      }else
        span.style.display="block";
      begin=scrollTop;
    }//onscroll
    //3.监听点击
    $("top").onclick = function () {
        clearInterval(timer);//先清后设置
        //4.开启缓动动画
      timer=setInterval(function () {
        //起初的begin为滚动长度
        begin=begin+(end-begin)*0.2;
        //begin一直在变化
        window.scrollTo(0,begin);//每20毫秒就滚动到这个位置
        //5.清除定时器
        if(parseInt(begin)===end) {
          clearInterval(timer);
        }
      },20);//每20毫秒变化一次
   
    }
  }//onload

在清除定时器部分，如果不清除，可以达到效果。但是为了性能，需要要遵循设置了就清除的原则。
但是如果只写一句clearInterval(timer);达不到预期效果。
因为每点击一次就清除一次，导致每点击一次，就回到（0，begin）的位置。而达不到缓动动画的效果。

其他回到顶部的方法

无动画

只需要直接获取到了当前滚动的长度，然后重新设置为0即可

      document.documentElement.scrollTop = 0;

锚定位

点击该连接，可以直接去到id名为topAnchor部分的位置

<a href="#topAnchor">回到顶部</a>