请选择 进入手机版 | 继续访问电脑版
查看: 352|回复: 0

[JavaScript] jQuery实现简单的回到顶部totop功能的教程

[复制链接]

911

主题

911

帖子

2783

积分

版主

Rank: 7Rank: 7Rank: 7

积分
2783
发表于 2017-11-27 19:31:39 | 显示全部楼层 |阅读模式
本文实例讲述了jQuery实现简单的回到顶部totop功能。分享给大家供大家参考,具体如下:
?
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>回到顶部</title>
  <style type="text/css">
   body{
    width: 100%;
    height: 10000px;
   }
   #totop{
    width: 50px;
    height: 50px;
    line-height: 50px;
    background: magenta;
    font-size: 20px;
    position: fixed;
    right: 50px;
    bottom: 50px;
   }
  </style>
</head>
<body>
</body>
<script src="js/jquery-1.8.3.min.js" ></script>
<script>
  //写在common.js文件中用来调用即可
  //1获取滚动条当前的位置
  function getScrollTop() {
   var scrollTop = 0;
   if (document.documentElement && document.documentElement.scrollTop) {
    scrollTop = document.documentElement.scrollTop;
   } else if (document.body) {
    scrollTop = document.body.scrollTop;
   }
   return scrollTop;
  };
  //2获取文档完整的高度
  function getScrollHeight() {
   return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
  };
  //3回到顶部
  function toTop(n) {
   $(window).on('scroll', function() {
    //console.log(getScrollTop()+"!"+getScrollHeight());
    if ($("#totop").size() > 0) {
     if (getScrollTop() < $(window).height() * n) {
      $("#totop").remove();
     }
    } else {
     if (getScrollTop() >= $(window).height() * n) {
      $("body").after("<div id='totop'>totop</div>");
      //插入了新标签 ,记得添加样式!
      $("#totop").on('click', function() {
       scroll(0,200);
      });
     }
    }
   });
  };
  //xxx.js文件来执行
  $(function(){
   toTop(2);
  })
</script>
</html>





回复

使用道具 举报

您需要登录后才可以回帖 登录 | 加入COS论坛

本版积分规则

COS系统论坛(cosxitong.cn)COS操作系统是由上海联彤与中科院软件研究所在北京时间2014年1月15日在北京联合发布具有自主知识产权的操作系统COS(China Operating System,意为中国操作系统),该操作系统可应用于个人电脑、智能掌上终端、机顶盒、智能家电等领域。
友链QQ:673672871
© 2014 COS操作系统论坛 Powered by Discuz!X 3.2  Template by COS系统论坛 
快速回复 返回顶部 返回列表