<!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 Monkey 压力测试 介绍

    Monkey 是Android SDK提供的一个命令行工具, 可以简单,方便地运行在任何版本的Android模拟器和实体设备上. Monkey会发送伪随机的用户事件流,适合对app做压力测试 阅读目录 ...

  2. C语言执行时报错“表达式必须是可修改的左值，无法从“const char [3]”转换为“char [120]” ”，原因：字符串不能直接赋值

    解决该问题的方法:使用strcpy函数进行字符串拷贝   原型声明:char *strcpy(char* dest, const char *src); 头文件:#include <string ...

  3. [转]MYSQL高可用方案探究(总结)

    前言 http://blog.chinaunix.net/uid-20639775-id-3337432.htmlLvs+Keepalived+Mysql单点写入主主同步高可用方案 http://bl ...

  4. Bootstrap<基础三> 排版

    Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落. ...

  5. 机器学习相关的Awesome系列

    Index Awesome 备注 1 Awesome Machine Learning 机器学习资源大全中文版 2 Awesome Artificial Intelligence 人工智能 3 Awe ...

  6. spout详解

    spout放在每个executer执行,我们先从spoutExecutors的初始化开始往下看,spoutExecutors是在一个worker中管理其中的tasks,在SpoutExecutors的 ...

  7. SQL表旋转

    在制作报表的时候,有时候会碰到基础资料是依照时间区间去一笔一笔记录的资料,但是使用者在看报表的时候想要将时间区间以横向的方式呈现不是直向的情况出现,又或者基础资料的表数据结构是横向的而使用者在看报表的 ...

  8. Java 社区论坛 - Sym 1.6.0 发布

    简介 Sym 是一个用 Java 写的现代化的社区论坛,欢迎来体验!(如果你需要搭建一个企业内网论坛,请使用 SymX) 非常详细的 Sym 功能点脑图 Sym 的诞生是有如下几点原因: (正版) 好 ...

  9. Spark的WorkCount的例子

    之前为了搭建scala开发spark的环境花了几天的时间,终于搞定了,具体可以参考:http://www.cnblogs.com/ljy2013/p/4964201.html   .下面就是用一个示例 ...

  10. Mac下手动安装Chromedriver.exe

    Mac OS X Yosemite 10.10.4下,ChromeDriver运行异常,需要手动安装chromedriver.exe Step 1: 打开https://sites.google.co ...