<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

 #wrap{

     height:2000px;

     background:pink;

     position:relative;

     }

 #ontop{

     position:absolute;

     bottom:0px;

     right:0px;

     background:red;

     color:#FFF;

     font-weight:bold;

     height:100px;

     width:100px;

     line-height:100px;

     text-align:center;

     cursor:pointer;

     }

</style>

<script type="text/javascript">

window.onload = function ()

{

    var otop = document.getElementById('ontop');

    var timer = null;

    otop.onclick = function ()

    {

        timer = setInterval(function()

        {

            document.body.scrollTop -= 50;

            document.documentElement.scrollTop -= 50;

            if(document.body.scrollTop == 0 && document.documentElement.scrollTop == 0 )

            {

                clearInterval(timer);

            }

        },20)

    };

};

</script>

</head>

<body>

<div id="wrap">

    <span id="ontop">回到顶部</span>

</div>

</body>

</html>

dom 回到顶部(兼容IE FF Chrome)的更多相关文章

  1. 关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器

    这篇文章主要介绍了关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器,需要的朋友可以参考下.希望对大家有所帮助   Firefox 和 IE 的浏览器各自实现了input历史记录的功能 ...

  2. 原生js绑定和解绑事件,兼容IE,FF,chrome

    主要是最近项目中用到了原生的js 解绑和绑定 事件  然后今天研究了一下,其实问题不大,不过要注意不要把单词写错了,今天我就找了好久单词写错了. 需求:当鼠标移上去以后,给Select加载元素,接着解 ...

  3. js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)

    转自:http://blog.csdn.net/itchiang/article/details/7769341 添加事件   var addEvent = function( obj, type, ...

  4. 兼容IE6-9,FF,Chrome的box-shadow效果（纯CSS）

    昨天由于工作关系,遇上了这个问题,苦恼一日无解——残念. 所幸终于在今天早上得到了解决,遗憾的是灵活性不够强,不能根据内容自适应,要配合JS才能达到自适应效果 不过总结到这里已经很满意了,毕竟规律已经 ...

  5. JS实现鼠标滚动事件，兼容IE9,FF,Chrome.

    <!-- 废话不多说,直接贴代码 --><script type="text/javascript" src="jquery.min.js"& ...

  6. 兼容IE，chrome 等所有浏览器 回到顶部代码

    今天在博客园看到一片帖子回到顶部代码,索性就看了下,但是发现在非IE浏览器下可以运行,在IE浏览器下却运行不了. 故将其代码搬弄过来做了些许修改后,完美支持了IE下的运行. 主要实现功能代码文件: & ...

  7. 用Javascript实现回到顶部效果

    用Javascript实现回到顶部效果 经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶 ...

  8. 通过js实现回到顶部功能

    许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...

  9. javascript 特效实现(2)——回到顶部效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. linux 查看程序是否运行

    命令格式:ps -ax|grep program_name 如查看包含python的程序是否运行: ps -ax|grep python ? Sl : python ToServer.py pts/ ...

  2. Vector示例一,二

    #include <iostream> int main(void) { double a[] = {1, 2, 3, 4, 5}; std::cout<<mean(a, 5) ...

  3. Machine Learning for hackers读书笔记(二)数据分析

    #均值:总和/长度 mean() #中位数:将数列排序,若个数为奇数,取排好序数列中间的值.若个数为偶数,取排好序数列中间两个数的平均值 median() #R语言中没有众数函数 #分位数 quant ...

  4. 如何扩展VCL的hint

    默认的Hint窗口展现如下: 这种情况下可以操作有窗口的背景颜色,字体样式 Application.Color 有的时候仅仅是文字满足不了我们的需求,比例如下格式: 这个时候就应该执行以下步骤: 1. ...

  5. UVa 12100 (模拟) Printer Queue

    用一个队列模拟,还有一个数组cnt记录9个优先级的任务的数量,每次找到当前最大优先级的任务然后出队,并及时更新cnt数组. #include <iostream> #include < ...

  6. 51nod1346 递归

    我终于知道我有多么蠢了...推规律根本不带我这么推的...跟51nod那场比赛的傻逼B题一样,想都不想想就打表找规律...智障啊找规律也要按照基本法! //f[1][2]=a[1][2] f[2][1 ...

  7. HDU 1869 六度分离【floyd】

    题意:给出n个人,m个关系,问是否满足任意两个人之间的距离通过6个人就可以连接 用floyd就可以了,注意距离是大于7 #include<iostream> #include<cst ...

  8. C语言之内存覆盖

    在实现memcpy函数的时候,我们说过要考虑内存覆盖的问题,到底什么是内存覆盖呢,他的出现对程序到底有什么影响呢?我们又要如何去解决这种问题的发生? 首先先看一般人经常实现的memcpy函数: #in ...

  9. BZOJ 1076 奖励关

    注意几点: 1.为什么要逆推?由此状态可以轻易算出彼状态是否可行,而彼状态却无法轻易还原为此状态. 2.为什么可以逆推?假设时光倒流了....23333 3.注意位运算的准确,大胆写方程. #incl ...

  10. python工厂方式创建list

    >>> l = list('sdfsdf') >>> l ['s', 'd', 'f', 's', 'd', 'f']