0、js获取高度

1
2
3
4
5
6
document.all   // 只有ie认识
 
document.body.clientHeight              // 文档的高，屏幕的文档区域的高
documemt.documentElement.clientHeight   // 有效的高，屏幕可视的高
document.documentElement.scrollHeight   // 屏幕的总高度
document.documentElement.scrollTop      // 滚动的高

1、首先，我们需要图片的支持，至少需要一张“置顶”的图片

2、然后，到网上找一张比较大的图片，到时直接多放几张到网页上就可模拟页面可滚动效果

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
<html>
<head>
    <style type="text/css">
    #scroll {
        width: 62px;
        height: 50px;
        right: 50px;
        bottom: 50px;
        display: none;
        cursor: pointer;
        position: fixed;
        background: url("goTop.png");
    }
    </style>
</head>
<body>
    <div>
        <img src="tangwei.jpg" />
        <img src="tangwei.jpg" />
        <img src="tangwei.jpg" />
        <img src="tangwei.jpg" />
        <img src="tangwei.jpg" />
        <img src="tangwei.jpg" />
        <img src="tangwei.jpg" />
        <img src="tangwei.jpg" />
        <img src="tangwei.jpg" />
        <img src="tangwei.jpg" />
        <img src="tangwei.jpg" />
        <img src="tangwei.jpg" />
        <img src="tangwei.jpg" />
        <img src="tangwei.jpg" />
        <img src="tangwei.jpg" />
    </div>
    <div id="scroll"></div>
</body>
<script type="text/javascript">
    // 获取置顶对象
    var obj = document.getElementById('scroll');
 
    // 置顶对象点击事件
    obj.onclick = function() {
        var timer = setInterval(function() {
            window.scrollBy(0, -50);
            if (document.body.scrollTop == 0) {
                clearInterval(timer);
            };
        }, 2);
    }
 
    // 窗口滚动检测
    window.onscroll = function() {
        obj.style.display = (document.body.scrollTop >= 300) ? "block" : "none";
    }
</script>
</html>

3、代码不多也不难，耐心一点都可以读懂，不规范的请忽略，效果图如下：

4、后来发现了几个问题

  1. ie6不支持 position:fixed; 所以置顶的图片会一直位于最底部；

  2. 按钮点击后，有些浏览器会有滚动置顶功能（谷歌，360，Opera等），而有些浏览器不支持 document.body.scrollTop（火狐，IE，Safari）

5、于是尝试解决，第一种问题可以直接用样式 css 来，而第二种则需要用 js，先来解决第一种，在网上有很多答案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
*html{
    background-image:url(about:blank);
    background-attachment:fixed;
}
#scroll {
    width: 62px;
    height: 50px;
    right: 50px;
    bottom: 50px;
    cursor: pointer;
    position: fixed;
    display: none;
    background: url("goTop.png");
 
    /* 兼容ie6位置fixed问题 */
    _position:absolute;
    _bottom:auto;
    /*_top:expression(eval(document.documentElement.scrollTop));*/
 
    _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
    _margin-bottom: 40px;
}

你会发现有下划线都是用来兼容 ie6 的，因为只有 ie6 不支持 position:fixed;

将元素固定在浏览器顶部用：

1
_top:expression(eval(document.documentElement.scrollTop));

将元素固定在浏览器底部用：

1
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));

然后你再用 _margin-top:10px; 或 _margin-bottom:10px; 来修改位置。

6、第二种则是需要用到 js：

主要是滚动的高度在浏览器之间支持问题， document.body.scrollTop

因为： document.body.scrollTop 主要是谷歌浏览器，360浏览器，没DOCTYPE的ie等支持

document.documentElement.scrollTop 则是火狐浏览器，有DOCTYPE的ie浏览器支持

最麻烦的是苹果的Safari 竟然只对window.pageYOffset支持

于是可写成这样：

1
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop；

7、整体的全部js代码是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
    // 获取置顶对象
    var obj = document.getElementById('scroll');
    var scrollTop = null;
 
    // 置顶对象点击事件
    obj.onclick = function() {
        var timer = setInterval(function() {
            window.scrollBy(0, -100);
            if (scrollTop == 0) 
                clearInterval(timer);
        }, 2);
    }
 
    // 窗口滚动检测
    window.onscroll = function() {
        scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        obj.style.display = (scrollTop >= 300) ? "block" : "none";
    }
</script>

最新文章

  1. 根据word模板（contract_templet.tld）生成并下载word合同及根据wordHTML模板（contract_templetHTML.tld）预览合同内容
  2. Php 安装 curl
  3. MFCButton Memory leak(内存泄露问题)
  4. iOS nib file owner
  5. AssetBundle系列——场景资源之解包（二）
  6. wghd的git代码仓库分支管理说明【转】
  7. PHP将解析xml变为数组方法
  8. jquery 取值赋值
  9. preg_match_all, preg_match
  10. （转）ThinkPHP系统常量
  11. java删除文件夹下所有文件
  12. a链接bug
  13. sitemap制作
  14. 7.21.01 if语句
  15. 关于Spring的69个面试题
  16. centos6.5时间相关
  17. 红米手机4A怎么样刷入开发版获得ROOT权限
  18. rest-framework序列化
  19. CAS集成oauth2协议的支持
  20. January 26th, 2018 Week 04th Friday

热门文章

  1. linux下配置ssledge代理服务器
  2. ORA-12569: TNS: 包校验和失败解决方法一例
  3. JS正则表达式验证数字
  4. Nodejs学习路线图
  5. javascript replace正则替换时调用函数替换的使用
  6. Amazon AWS EC2开启Web服务器配置
  7. DataTables 控件使用和心得 (2) - 参数Options
  8. Chrome开发者工具不完全指南（六、插件篇）
  9. C#中的线程三 (结合ProgressBar学习Control.BeginInvoke)
  10. java提高篇(十七)-----异常(二)