<!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. Android开发--apk的生成

    0.前言 此方法为eclipse中生成apk的方法!!!! 1.生成ketstore 在命令提示符中找到java的jdk路径,例如: D:\study software\Java\jdk1.8.0_2 ...

  2. chrome 扩展包 postman 的安装

    由于chrome网上应用不能使用.添加扩展程序,需要其他的办法. 1.下载postman安装包.下载地址 2.这一步按照这个下载包中的方法,也可以,可以忽略其错误. 先解压出crx,使用两个办法,使用 ...

  3. 删除ORACLE的步骤

    1.关闭oracle所有的服务.可以在windows的服务管理器中关闭: 2.打开注册表:regedit 打开路径: HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlS ...

  4. TortoiseGit 连接Git服务器不用每次输入用户名和密码的方法

    每次git push 都要输入用户名和密码. 虽然安全,但在自己电脑上每次都输有些麻烦,如何记住用户名和密码呢? 试了很多方法,找到这个最简单,亲测可行. 当你配置好git后,在C盘C:\Users\ ...

  5. git clone error: RPC failed; result=22, HTTP code = 502

    http://www.jianshu.com/p/645d3fe4e028 git克隆的工程太大用https的方式会有如下问题 hbl:tmp hubert$ git clone https://gi ...

  6. python安装supervisor

    1.下载supervisor-3.3.1.tar.gz    http://pan.baidu.com/s/1dEPhGEd 2.下载meld3-1.0.2.tar.gz   http://pan.b ...

  7. 16101301（MaterialLOD QualitySwitch）

    [目标] MaterialLOD QualitySwitch [思路] 1 QualitySwitch UE4有三挡 UE3 2 现在UE3需要添加三挡 3 UE3 class UMaterialEx ...

  8. sql server 脚本创建数据库和表

    USE [master] GO IF EXISTS(SELECT 1 FROM sysdatabases WHERE NAME=N'HkTemp') BEGIN DROP DATABASE HkTem ...

  9. Yii2 rules 添加时间比较功能

    php比较类文件:yiisoft\yii2\validators\CompareValidator.php JS比较类文件: yiisoft\yii2\assets\yii.validation.js ...

  10. 翻转和翻页效果TextFile的几种自定义例子

    前一篇文章,已经介绍了BMR的基础用法,再结合Spark和Scala的文档,我想应该是可以开始你的数据分析之路的.这一篇文章,着重进行一些简单的思路上的引导和分析.如果你分析招聘数据时,卡在了某个环节 ...