回到页面顶部demo

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body {

            height: 2000px;

        }

        #up {

            position: fixed;

            bottom: 0;

            right: 0;

            width: 100px;

            height: 100px;

            background: #c1c1c1;

        }

    </style>

</head>

<body>

    <div id="up"></div>

    <script>

        window.onload = function (){

            var oDiv = document.getElementById("up");

            var timer = null;

            var bySys = true;

            //如何检测用户拖动了滚动条

            window.onscroll = function (){

                if (!bySys) {

                    clearInterval(timer);

                }

                bySys = false;

            }

            oDiv.onclick = function (){

                timer = setInterval(function() {

                    var scrollTop = document.documentElement.scrollTop ||

                            document.body.scrollTop;

                    var iSpeed = Math.floor(-scrollTop/8);

                    if (scrollTop === 0) {

                        clearInterval(timer);

                    }

                    bySys = true;

                    document.body.scrollTop = scrollTop + iSpeed;

                    document.documentElement.scrollTop = scrollTop + iSpeed;

                }, 30);

            }

        }

    </script>

</body>

</html>

阻止事件冒泡

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #box {

            width: 100px;

            height: 200px;

            background: #000;

            display: none;

        }

    </style>

</head>

<body>

    <input type="button" value="显示" id="btn">

    <div id="box"></div>

    <script>

        var oBtn = document.getElementById("btn");

        var oBox = document.getElementById("box");

        oBtn.onclick = function (ev){

            var oEvent = ev || event;

            oBox.style.display = 'block';

            oEvent.cancelBubble = true; // 阻止事件冒泡

        }

        document.onclick = function (){

            oBox.style.display = 'none';

        }

    </script>

</body>

</html>

一种用javascript实现的比较兼容的回到顶部demo + 阻止事件冒泡的更多相关文章

  1. javascript阻止事件冒泡的兼容写法及其相关示例

    //阻止事件冒泡的兼容写法 function stopBubble(e){ //如果提供了事件对象,则是一个非IE浏览器 if(e && e.stopPropagation) //因此 ...

  2. JavaScript阻止事件冒泡（兼容IE、Chrome、FF）

    这里仅仅是一个简单代码demo,因为时间问题并未做深入研究,因为今天做项目时要用到阻止事件冒泡的内容,找了好多才找到一个可以使用的,特记录之. <!DOCTYPE HTML> <ht ...

  3. javascript 阻止事件冒泡和阻止默认事件对比

    公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并 ...

  4. JavaScript事件冒泡机制和阻止事件冒泡及默认事件

    一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true:  FF下:event ...

  5. jquery阻止事件冒泡的3种方式

    第一种:return false, 缺点:直接返回了函数,函数后面的语句没法执行了: $('.btn').on('click',function(event){ do something ... re ...

  6. 阻止事件冒泡两种方式：event.stopPropagation();和return false;

    jQuery提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function (event) { ...

  7. JavaScript 阻止事件冒泡的实现方法

    JavaScript 阻止事件冒泡,无使用其它插件来辅助,原生JS代码,考虑到浏览器的兼容性问题,这里对IE/火狐.Operating以及Chrome都有针对性的判断,代码如下: function c ...

  8. JQuery中阻止事件冒泡的两种方式及其区别

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...

  9. JAVAscript——菜单下拉列表练习(阻止事件冒泡)

    下拉列表框,鼠标点击文本框,出现下拉,鼠标(离开的时候或者点击网页其他位置时)下拉列表消失.鼠标放到下拉列表的某一项上变背景色,点击下拉列表的某一项将该项的值显示在文本框内,然后下拉列表消失. < ...

随机推荐

  1. 利用console控制台调试php代码

    /** * 控制台输出 * @param $var * @param string $level */ public function console($var,$level = 'debug') { ...

  2. 手工部署Sqlserver CLR程序集

    原文 手工部署Sqlserver CLR程序集 以前一直用VS部署Sqlserver CLR程序集简单省事,现在服务器部署在内网了,必须手动更新部署Sqlserver CLR程序集.    开始以为A ...

  3. perl5 第三章 操作符

    第三章 操作符 by flamephoenix 一.算术操作符二.整数比较操作符三.字符串比较操作符四.逻辑操作符五.位操作符六.赋值操作符七.自增自减操作符八.字符串联结和重复操作符九.逗号操作符十 ...

  4. C# Windows Sockets (Winsock) 接口 (转)

    在.Net中,System.Net.Sockets 命名空间为需要严密控制网络访问的开发人员提供了 Windows Sockets (Winsock) 接口的托管实现.System.Net 命名空间中 ...

  5. Microsoft Deployment Toolkit 2013 Preview Release Now Available

    MDT 2013 provides a common console with comprehensive tools and guidance for every organizational ro ...

  6. POJ 1655 - Balancing Act 树型DP

    这题和POJ 3107 - Godfather异曲同工...http://blog.csdn.net/kk303/article/details/9387251 Program: #include&l ...

  7. nodejs学习笔记_nodejs和PHP在基础架构上的差别--共享状态的并发

    绝大多数对于Node.js的讨论都把关注点放在了处理高并发能力上,做开发的时候一定要明确node内部做出的权衡,以及node应用性能好的原因. node 为javascript引入了一个复杂的概念,: ...

  8. 2014-CVTE网测部分软件技术测试题及答案

    1.叉树的先序遍历序列和后序遍历序列正好相反,则该二叉树满足的条件是(D) A.空或只有一个结点 B.高度等于其结点数 C.该二叉树是完全二叉树 D.所有结点无右孩子 应该是二叉树的每个结点都只有一个 ...

  9. JavaScript中cookie的路径(path)和域(domain)

    cookie虽然是由一个网页所创建,但并不只是创建cookie的网页才能读 取该cookie.在默认情况下,与创建cookie的网页在同一目录或子目录下的所有网页都可以读取该cookie.但如果在这个 ...

  10. 基础算法-查找：线性索引查找（II）

    索引查找是在索引表和主表(即线性表的索引存储结构)上进行的查找. 索引查找的过程是: 1)首先根据给定的索引值K1,在索引表上查找出索引值等于K1的索引项,以确定对应子表在主表中的开始位置和长度. 2 ...