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>

js之滚动置顶效果的更多相关文章

  1. 源生js惯性滚动与回弹效果

    在写移动端的APP或者页面时,经常会遇到惯性滚动与回弹效果.用插件iscroll可以轻松解决这个问题,大多数的移动框架也能轻松解决这个问题,它们内部都封装了这个效果. 一直好奇这个效果原生JS是怎么实 ...

  2. Android ListView标题置顶效果实现

    一. 有图有真相     二.实现: 1. 基于ListView分类效果 2. TitleView即标题的处理(创建) 3. 处理TitleView的三种状态 三.源码: 例子下载 实现可以看代码,具 ...

  3. js 上下滚动加停顿效果，js 跑马灯加停顿效果

    <div id="middle"> <ul id="slide1"> <li>尾号1183的用户刚刚领取了 78.23元 的 ...

  4. js实现div吸顶效果

    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> < ...

  5. javascript平时小例子⑧(导航置顶效果)

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  6. vue 通过自定义指令实现 置顶操作；

    项目需求:要求当前项目每个页面滑到超出一屏的距离时,出现 backTop 按钮,点击则回到最顶端:俗称置顶操作: 因为涉及到的页面较多,每个页面都加肯定显得重复累赘,最终想到了 Vue 的自定义指令  ...

  7. WinFrom窗体始终置顶

    调用WindowsAPI使窗体始终保持置顶效果,不被其他窗体遮盖: [DllImport("user32.dll", CharSet = CharSet.Auto)] privat ...

  8. iOS UILabel 文字 置顶/置底 实现

    iOS UILabel控件默认文字位置是居中的,如图所示: 但是我们经常碰到这样的需求,希望文字向上置顶,或者向下置底,但是很遗憾,iOS API中并没有提供相应的属性和方法,需要我们手动设置. 利用 ...

  9. Qt::QWindow多窗口争抢置顶状态解决方案

    有时候我们会有这种需求,自己的桌面程序需要置顶,但是程序包含了很多窗口,可能我们要求窗口1,2都在其它桌面程序之上,但是窗口1必须随时在窗口2之上. Qt提供的置顶方式是在windowsflags上增 ...

随机推荐

  1. WPF 图片显示中的保留字符问题

    在WPF中显示一张图片,本是一件再简单不过的事情.一张图片,一行XAML代码即可. 但是前段时间遇到了一件奇怪的事: 开发机上运行正常的程序,在某些客户机器上却显示不了图片,而且除了这个问题,其它运行 ...

  2. PHP的高效IOC框架——CanoeDI

    一个非常简单且实用的IoC框架,相对于其他的Ioc框架有如下特点: 高效: 框架使用了非常实用且高效的算法,使得框架本身对应用的影响微乎其微,且框架提供了C扩展,最大限度的将性能提升到最高. 配置简单 ...

  3. java构造器

    java的构造器不是方法,因为没有返回值. 构造器可以重载. 构造器的访问说明符: private:只有本类可以使用这个构造器. protected:这个类的子类和包中的类都可以使用此构造器. pub ...

  4. LightHttpd源码分析

    源码:https://github.com/EZLippi/Tinyhttpd 要在Linux中编译,无需像代码注释所说那样: /* This program compiles for Sparc S ...

  5. 《利用Python进行数据分析》第123章学习笔记

    引言 1 列表推导式 records = [json.loads(line) for line in open(path)] 这是一种在一组字符串(或一组别的对象)上执行一条相同操作(如json.lo ...

  6. 为什么没调用 didRegisterForRemoteNotificationsWithDeviceToken 和 didFailToRegisterForRemoteNotificationsWithError

    一步一步按照网上 push notification 教程走下来,发现didRegisterForRemoteNotificationsWithDeviceToken 和 didFailToRegis ...

  7. [leetcode 27]Implement strStr()

    1 题目: Implement strStr(). Returns the index of the first occurrence of needle in haystack, or -1 if ...

  8. 在PHP中使用Mysqli操作数据库

    PHP的 mysqli 扩展提供了其先行版本的所有功能,此外,由于 MySQL 已经是一个 具有完整特性的数据库服务器 , 这为PHP 又添加了一些新特性 . 而 mysqli 恰恰也支持了 这些新特 ...

  9. 依赖注入的威力，.NET Core的魅力：解决MVC视图中的中文被html编码的问题

    有园友在博问中提了这样一个问题 —— .NET Core 中文等非英文文字html编码输出问题,到我们的 ASP.NET Core 项目中一看,也是同样的问题. 比如下面的Razor视图代码: @{ ...

  10. Java多线程10：ThreadLocal的作用及使用

    ThreadLocal的作用 从上一篇对于ThreadLocal的分析来看,可以得出结论:ThreadLocal不是用来解决共享对象的多线程访问问题的,通过ThreadLocal的set()方法设置到 ...