<!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. ios中属性和对象的初始化

    属性和对象的初始化为了方便记忆, 我们可以都使用self.来初始化. 这样可以避免内存的过度释放.

  2. Atom使用到的插件

    atom-beautify atom-css-class-checker atom-css-comb atom-css-unit-converter atom-csscomb atom-csslint ...

  3. Elasticsearch使用备忘

    最近我们需要对大约2T(6.5亿条)日志做全文检索,Elasticsearch看起来很火爆,又有很多产品使用(Facebook.github.stackoverflow),值得一试.以下是一些基础知识 ...

  4. mysql数据库使用

    C#操作Mysql数据库的存储过程,网址 DATEDIFF() 函数返回两个日期之间的天数. 语法 DATEDIFF(date1,date2) date1 和 date2 参数是合法的日期或日期/时间 ...

  5. Bootstrap<基础二> 网格系统

    Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 什么是网格(Grid)? 摘自维基百科: 在平面设计中,网格 ...

  6. C# ADO.NET 连接Sybase 数据库

    using Sybase.Data.AseClient;//反编译修改后的DLL public class SybaseHelper { public AseConnection con; publi ...

  7. C# winform TreeView中关于checkbox选择的完美类

    public static class TreeViewCheck { /// <summary> /// 系列节点 Checked 属性控制 /// </summary> / ...

  8. tensor flow入门笔记

    个人学习笔记,欢迎交流.

  9. PostSharp-4.3.22安装包_KeyGen发布

    PostSharp-4.3.22安装包_KeyGen发布 请低调使用. 下载相关 PostSharp-4.3.22安装包_KeyGen.part1.rar PostSharp-4.3.22安装包_Ke ...

  10. UDP丢包严重

    项目要求udp能够达到10万的并发量,搞了几天,丢包严重, 今天终于解决了,原来是socket缓冲区设置的不够大已经jvm内存不够大