带缓动效果返回顶部的按钮

发表于

带缓动效果返回顶部的按钮

标签： web


现在，当你浏览一个页面，滚动页面后会发现右下自动出现返回顶部按钮。其中我就很喜欢虎扑返回顶部按钮的设计（我应该是hupu最捞的JR吧）。

由于这个原因，自己也对返回顶部比较陌生，看了张鑫旭老师的博客
http://www.zhangxinxu.com/wordpress/2017/01/share-a-animation-algorithm-js/有了点想法，就自己试做了一下。下面放出主要代码（还有很多不足之处和不规范的地方等我日后再来完善吧）。

1
2
3
4
5
6
7
8
9
10
html:
  <div class="goTop">
        <!-- 注意backToTop()，不要忘记括号 -->
        <div class="rocket">
          <a class="clickTop"onclick="backToTop(6)">
            <img src="grey.png" >
          </a>
          </div>
      </div>
  </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.goTop{
  // 定位
      display: block;
      z-index: 999;
      bottom: 100px;
      position: fixed;
      right: 2%
    }

    .clickTop{
      cursor: pointer;
    }

    .clickTop:hover {
    content: url(red.png);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
var show=document.querySelector('.clickTop');

window.onload=function () {
      show.style.display = "none";
}
  window.onscroll = function () {
  //这样写不够简洁，现在精力不够日后再完善
      if (document.documentElement.scrollTop + document.body.scrollTop > 100) {
      //通过更改css属性来显示和隐藏
          show.style.display = "block";
      }
      else {
        show.style.display = "none";
      }
  }

  // requestAnimationFrame的兼容处理
  if (!window.requestAnimationFrame) {
  requestAnimationFrame = function(fn) {
      setTimeout(fn, 17);
  };
  }
// 滚动到顶部缓动实现
// rate表示缓动速率，默认是2
var backToTop = function (rate) {
//获取当前页面滚动条纵坐标的位置（可能为了浏览器的兼容）
  var doc = document.body.scrollTop? document.body : document.documentElement;
  var scrollTop = doc.scrollTop;
  var top = function () {
   // 默认为2
      scrollTop = scrollTop + (0 - scrollTop) / (rate || 2);

      // 临界判断，终止动画
      if (scrollTop < 1) {
          doc.scrollTop = 0;
          return;
      }
      doc.scrollTop = scrollTop;
      // 动画gogogo!
      //回调函数
      requestAnimationFrame(top);
  };
  top();
  };

网站应该使用的是jQuery来控制效果吧。确实jQuery调用函数控制会比较简单漂亮，不过我对jQuery很陌生就算了。