<!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 <style type="text/css">

 *{ margin:0; padding:0;}

 body{ height:2000px;}

 #box{ width:40px;  height:40px; display:none; position:fixed; right:30px; bottom:30px; background:#f00;}

 </style>

 <script type="text/javascript">

 window.onload=function(){

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

     var clientHeight=document.documentElement.clientHeight;

     var timer=null;

     var onOff=true;

     window.onscroll=function(){

         var osTop=document.documentElement.scrollTop || document.body.scrollTop;

         if(osTop>=clientHeight){

             oBox.style.display='block';

         }else{

             oBox.style.display='none';

         };

         if(!onOff){

             clearInterval(timer);

         };

         onOff=false;

     };

     oBox.onclick=function(){

         timer=setInterval(function(){

             var osTop=document.documentElement.scrollTop || document.body.scrollTop;

             var iSpeed= Math.floor(-osTop/6);

             var i=document.documentElement.scrollTop = document.body.scrollTop = osTop + iSpeed;

             onOff=true;

             if(osTop ==0){

                 clearInterval(timer);

             }

         },30);

     };

 };

 </script>

 </head>

 <body>

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

 </body>

 </html>

Javascript 特效（一）返回顶部的更多相关文章

  1. javascript 缓动返回顶部案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. javascript+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...

  3. 【JavaScript&jQuery】返回顶部

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. javascript实现网页返回顶部功能

    在浏览网页时,我们一般是拖动滚动条向下滑动,浏览下面的内容,当页面超过单页时,右下角会出现一个回到顶部的图标,有些网站这个图标一直显示在右下角的. 有些网站使用锚链接来实现页面内容的跳转,但这种效果的 ...

  5. JavaScript实现减速返回顶部

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jQuery类级别插件--返回顶部，底部，去到任何部位

    先引入js:<script type="text/javascript" src="jquery.js" ></script><s ...

  7. [html][转]常用返回顶部代码

    转至:http://jingyan.baidu.com/article/7082dc1ca6b928e40a89bd1a.html 一.使用HTML的锚标记最简单了 但是唯一的缺点就是样式不怎么样,会 ...

  8. JavaScript返回顶部特效

    样式: <style type="text/css"> /*返回顶部特效*/ a { border: none; text-decoration: none; outl ...

  9. 使用Javascript实现返回顶部功能。

    为了提高网站的浏览体验及友好度,相信大部分网站需要一个返回顶部的按钮,如果使用传统的a标记,再做一个div加上链接的话,非常麻烦,不仅每个页面都需要添加,而且不能实现非常智能的效果及简化维护时间. 下 ...

  10. javascript 特效实现(2)——回到顶部效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. PHPCMS开启伪静态和织梦开启伪静态的优缺点比较

    PHPCMS和织梦CMS都是国内比较出名的PHP语言的CMS程序系统,他们拥有比较完善的网站内容管理功能,也比较注重网站优化方面的功能,深受很多网站建设者的喜爱. 这两套系统,都有启用伪静态的功能,在 ...

  2. [css]当父元素的margin-top碰上子元素的margin-top

    出现条件:父元素和子元素都设置了margin-top 现象:子元素的margin-top可能会失效,导致父元素和子元素粘连在一起 解决方法: 1.给父元素加padding-top:1px. 2.给父元 ...

  3. 利用Cayley-Hamilton theorem 优化矩阵线性递推

    平时有关线性递推的题,很多都可以利用矩阵乘法来解决. 时间复杂度一般是O(K3logn)因此对矩阵的规模限制比较大. 下面介绍一种利用利用Cayley-Hamilton theorem加速矩阵乘法的方 ...

  4. Android的RecyclerView

    简介 RecyclerView是support-v7中用来替换ListView的组件.RecyclerView 小组件比 ListView 更高级且更具灵活性. 此小组件是一个用于显示庞大数据集的容器 ...

  5. java中的反射机制在Android开发中的用处

    JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取的信息以及动态调用对象的方法的功能称为java语言的反 ...

  6. Unreal Engine Plugin management

    Be aware to remove any dependencies to any modules related to Editor, or else it will end up with fa ...

  7. X3850M2安装CertOS 7 KVM

    在旧的X3850中安装linux系统,研究KVM. 通过选择fedora和centos测试,最终选择centos7来安装. 先安装了一台,安装第二台时又出现第一台的问题,决定记录下来防止记忆出错. 1 ...

  8. #define用法解析

    #define Add(a,b) a+b; 在一般使用的时候是没有问题的,但是如果遇到如: c * Add(a,b) * d 的时候就会出现问题,代数式的本意是a+b然后去和c,d相乘,但是因为使用了 ...

  9. WebView---Android与js交互实例

    Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为true 原文地址:http://blog.csdn.net/it10 ...

  10. 利用border-radious画图形

    今天才发现,border-radius可以画很多图形,下面跟我来看一下吧: 在设有宽和高的情况下画一个圆: #div1{ /*宽高相等,圆角范围为高或宽的一半或以上*/ background-colo ...