回到页面顶部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. 关于类似于自动填充搜索框的DEMO

    接了个单子,客户要求左边输入时,右边自动到数据库查出对应内容,如果是单个INPUT还好,这个是动态增加INPUT,不过都是一样,关键是思路 这里遇到最郁闷的问题,就是我用的JQ1.9 以前用的JQ1. ...

  2. 关于Python中的yield(转载)

    您可能听说过,带有 yield 的函数在 Python 中被称之为 generator(生成器),何谓 generator ? 我们先抛开 generator,以一个常见的编程题目来展示 yield ...

  3. 深入剖析哪些服务是Oracle 11g必须开启的

    这篇文章主要介绍了哪些服务是Oracle 11g必须开启的以及这些服务的详细介绍,需要的朋友可以参考下   成功安装Oracle 11g数据库后,你会发现自己电脑运行速度会变慢,配置较低的电脑甚至出现 ...

  4. 试用阿里云RDS的MySQL压缩存储引擎TokuDB

    以前就用过自己搭建MySQL服务器的两种存储引擎MyISAM和InnoDB(也用过一点Memory方式),在今年初转向阿里云关系型数据库服务RDS的时候,看到可调参数中有一个TokuDB,不过不太了解 ...

  5. TCP/IP笔记 三.运输层(4)——TCP链接管理与TCP状态机

    1. 建立连接 三次握手 (1)A 的 TCP 向 B 发出连接请求报文段,其首部中的同步比特 SYN 应置为 1,并选择序号 x,表明传送数据时的第一个数据字节的序号是 x. (2)B 的 TCP ...

  6. [转]chrome技术文档列表

    chrome窗口焦点管理系统 http://www.douban.com/note/32607279/ chrome之TabContents http://www.douban.com/note/32 ...

  7. POJ 2762 Going from u to v or from v to u? （Tarjan） - from lanshui_Yang

    Description In order to make their sons brave, Jiajia and Wind take them to a big cave. The cave has ...

  8. hdu 1085 Holding Bin-Laden Captive! (母函数)

    //给你面值为1,2,5的三种硬币固定的数目,求不能凑出的最小钱数 //G(x)=(1+x+...+x^num1)(1+x^2+...+x^2num2)(1+x^5+,,,+x^5num3), //展 ...

  9. SharePoint2013切换账户身份登录设置

    1. 打开Welcome.ascx文件:C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE ...

  10. 工具篇-TraceView

    --- layout: post title: 工具篇-TraceView  description: 让我们远离卡顿和黑屏 2015-10-09 category: blog --- ## 让我们远 ...