一种用javascript实现的比较兼容的回到顶部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>
时间: 2024-11-05 18:56:21

一种用javascript实现的比较兼容的回到顶部demo的相关文章

Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID

query取得iframe中元素的几种方法 在iframe子页面获取父页面元素代码如下: $('#objId', parent.document);// 搞定... 在父页面 获取iframe子页面的元素代码如下: $("#objid",document.frames('iframename').document) 显示iframe中body元素的内容. $(document.getElementById('iframeId').contentWindow.document.body)

JavaScript — event介绍以及兼容处理

JavaScript - event介绍以及兼容处理 1.事件流 浏览器发展到第四代时(IE4及 Netscape Communicator 4),浏览器开发团队遇到一个问题:页面的哪个部分会拥有某个特定的事件?可以想象在一张纸上的一组同心圆,如果把手指放在圆心上,那么你的手指指向的不是一个圆,而是纸上的所有圆.即在点击一个按钮时,不仅点击了按钮,也点击了整个页面. 事件流描述的是从页面中接收事件的顺序.不过IE 和 Netscape 开发团队提出的想法差不多完全相反. IE的事件流是事件冒泡流

谈一谈几种处理 JavaScript 异步操作的办法

本文标签:   JavaScript 原生JavaScript优势 JavaScript异步 js的异步操作 回调函数 TensorFlow REST   服务器 引言 js的异步操作,已经是一个老生常谈的话题,关于这个话题的文章随便google一下都可以看到一大堆.那么为什么我还要写这篇东西呢?在最近的工作中,为了编写一套相对比较复杂的插件,需要处理各种各样的异步操作.但是为了体积和兼容性,不打算引入任何的pollyfill,甚至连babel也不允许使用,这也意味着只能以es5的方式去处理.使

转:5种回到顶部的写法从实现到增强

http://www.cnblogs.com/xiaohuochai/p/5836179.html 前面的话 本文先详细介绍回到顶部的5种写法,然后对其实现功能增加,最后得到最终实现 写法 [1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意]关于锚点的详细信息移步至此 <body style="height:2000px;">

5种回到顶部的写法从实现到增强

× 目录 [1]写法 [2]增强 [3]实现 前面的话 本文先详细介绍回到顶部的5种写法,然后对其实现功能增加,最后得到最终实现 写法 [1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意]关于锚点的详细信息移步至此 <body style="height:2000px;"> <div id="topAnchor&

5种回到顶部的写法

写法 [1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意]关于锚点的详细信息移步至此 <body style="height:2000px;">     <div id="topAnchor"></div>     <a href="#topAnchor" s

jquery javascript 回到顶部功能

今天搞了一个回到顶部的JS JQ功能 [javascript] view plaincopyprint? (function($){ $.fn.survey=function(options){ var defaults={width:"298",height:"207"}; var options=$.extend(defaults,options); if($.browser.msie){ var ieVersion=parseInt($.browser.ver

JavaScript实现回到顶部

HTML页面使用一个a标签,href内填写JavaScript:;以阻止默认行为,在学习实例的时候添加一个大的div来充实页面. demo: <a href="javascript:;" id="btn" title="回到顶部"></a> 其css代码为: #btn{ display: none; position: fixed; left: 90%; bottom: 40px; height:60px; width:

用Javascript实现回到顶部效果

用Javascript实现回到顶部效果 经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶部时太快了,而且用户可能在看到某个感兴趣的东西想停下来,却停不下来),针对上面的缺点,我们试着用Javascript的方法来得到实现.思路是这个样子的: 1.首先用html和css构建基本的例子,代码如下 html部分: <div class="box"> <img sr