回到页面顶部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. jQuery异步请求(如getJSON)跨域解决方案

    相信大家在使用jQuery异步请求非自己网站内相对资源(通过别人站点上的URL直接读取)使经常会遇到如下错误吧,实际上这些错误都是浏览器安全机制“搞的鬼”,才让我们开发路上遇到了拦路虎. 当你直接在浏 ...

  2. shopnc b2b2c如何开启伪静态？？

    shopnc b2b2c开启伪静态的方法 一. windows环境下 1.先下载isapi rewrite插件,安装,然后我们把根目录下面的htaccess.txt那么修改成.htaccess即可. ...

  3. [LeetCode]题解（python）：117-Populating Next Right Pointers in Each Node II

    题目来源: https://leetcode.com/problems/populating-next-right-pointers-in-each-node-ii/ 题意分析: 根据上一题,如果给定 ...

  4. 关于block 用法

    Block  Apple 在C, Objective-C, C++加上Block這個延申用法.目前只有Mac 10.6 和iOS 4有支援.Block是由一堆可執行的程式組成,也可以稱做沒有名字的Fu ...

  5. net-snmp启用python模块

    1. http://blog.jeoygin.org/2011/09/centos-5-install-python-2-6-and-python-setuptools-2-6.html 2. htt ...

  6. PowerPoint2003/2007幻灯片常用快捷键大全

    熟习掌握PowerPoint快捷键不仅可以对我们在制作幻灯片的时候更加熟练节省时间.而且在我们演示PPT文稿的时候,也不需要停下演讲去调试菜单工具来切换下一张,我们只需要轻轻的按一下键盘即可轻松切换P ...

  7. mrtg监控网络流量简单配置

    Mrtg服务器搭建(监控网络流量) [日期:2012-07-03] 来源:Linux社区  作者:split_two [字体:大 中 小]   [实验环境] 监控机:Red Hat linux 5.3 ...

  8. 提高IOS开发效率的常用网站、开源类库及工具

    时间过得很快,学习iOS也已经2年左右了.在这里整理一下,在平台平常开发过程中使用比较多的开源类库.网站与工具吧! 一.网站: UI网站: 1.https://www.cocoacontrols.co ...

  9. Why is celsius = 5 * (fahr - 32) / 9 ?

    Go to my personal blog There is a program to print Fahrenheit-Celsius table as below. #include <s ...

  10. 图像检索：一维直方图+EMD距离

    EMD距离具体介绍已经在在这里已经给出. 思路:我们把一张图像的归一化的一维直方图作为signature的权值,也就是一般在比較两幅图像颜色直方图的EMD距离时,每一行的坐标一样,仅仅是权重值不一样. ...