回到页面顶部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. IOS 特定于设备的开发：Info.plist属性列表的设置

    应用程序的Info.plist属性列表使你能够在向iTunes提交应用程序时指定应用程序的要求.这些限制允许告诉iTunes应用程序需要哪些设备特性. 每个IOS单元都会提供一个独特的特性集.一些设备 ...

  2. 【转】IOS 输入框被键盘遮盖的解决方法

    做IOS开发时,难免会遇到输入框被键盘遮掩的问题.上网上搜索了很多相关的解决方案,看了很多,但是由衷的觉得太麻烦了. 有的解决方案是将视图上的所有的东西都添加到一个滚动视图对象( UIScrollVi ...

  3. ECMAScript 5中新增的数组方法

    ECMAScript 5中定义了9个新的数组方法,用于遍历.映射.过滤.检测.简化和搜索数组. 在开始介绍之前,很有必要对这几个新增的数组方法做一个概述.首先,大多数方法的第一个参数接收一个函数,并且 ...

  4. QT实现拖放文件（有例子，并且图文并茂，非常清楚）

    转自:http://my.oschina.net/voler/blog/345722 目录[-] 0. 源代码下载地址 1. 简单文件拖放 2. 复杂文件拖放 3. 通过按钮来完成列表数据的转移 4. ...

  5. android Json解析详解（详细代码）

    JSON的定义: 一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性.业内主流技术为其提供了完整的解决方案(有点类似于正则表达式 ,获得了当今大部分语言的支持),从而可以在不同平台间进行数据 ...

  6. Hello China操作系统STM32移植指南（三）

    移植到STM32的源代码,可从下列链接下载: http://download.csdn.net/detail/hellochina15/7049909 包含两个包:一个是移植前的Hello China ...

  7. 基于Visual C++2013拆解世界五百强面试题--题12-进制转换

    编程实现,把十进制数(long型)分别以二进制和十六进制形式输出,不能使用printf系列库函数. 转换成二进制,直接循环移位依次取每一位,判断1或0然后将相应字符放入字符串缓冲区中. 对于十六进制, ...

  8. VC编程之设置客户区背景图片

    在很多系统中出于美观的需要常常要设置背景图片.下面我介绍一种在客户区设置背景图片的简单方法. 1 ．将背景bmp 图片导入到工程,资源ID 这里假设为 IDB_BITMAP1 2 ．在视图类添加如下代 ...

  9. hdoj 1233 还是畅通工程(最小生成树)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1233 思路分析:该问题为最小生成树问题,使用kruskal算法或者prim算法即可解决: 代码如下: ...

  10. ecshop标签大全 各个页面常用标签大全

    先从index.php主页开始 页面关键字 {$keywords } 页面标题 {$page_title} 产品分类 父分类列表 {foreach from=$categories item=cat ...