<!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. guava学习--ComparisonChain

    转载:https://my.oschina.net/realfighter/blog/349824 在日常的工作中,我们经常需要对两个对象进行比较,以找出其中的异同, Java中提供了compare/ ...

  2. Sql Server参数化查询之where in和like实现详解

    where in 的参数化查询实现 首先说一下我们常用的办法,直接拼SQL实现,一般情况下都能满足需要 string userIds = "1,2,3,4"; using (Sql ...

  3. oracle基础学习

    一.创建数据库用户 create user myaccount identified by mypassword;(my+account表示 账号,my+password表示 密码) 二.授予用户权限 ...

  4. ZTE and TP-Link RomPager - DoS Exploit

    #!/usr/bin/env python # -*- coding: utf-8 -*- # Exploit Title: ZTE and TP-Link RomPager DoS Exploit ...

  5. LeetCode 5 Longest Palindromic Substring manacher算法,最长回文子序列,string.substr(start,len) 难度:2

    https://leetcode.com/problems/longest-palindromic-substring/ manacher算法相关:http://blog.csdn.net/ywhor ...

  6. 模具厂MES项目介绍

    开发工具:Microsoft Visual Studio 2012 数据库:     Oracle 开发语言:C#(4.0) 版本控制工具:TortoiseSVN 底层ORM框架:IBatisNet ...

  7. 【译】Android 6.0 Changes （机翻加轻微人工校对）

    Android 6.0 Changes In this document Runtime Permissions Doze and App Standby Apache HTTP Client Rem ...

  8. 例子：Background Audio Streamer Sample

    The Background Audio Streamer sample demonstrates how to create an app that uses a MediaStreamSource ...

  9. jquery 显示弹出层可利用动画效果

    1 show()方法和hide()方法 $("selector").show()  从display:none还原元素默认或已设置的display属性$("selecto ...

  10. selenium配置

    1.firebug安装--火狐插件 2.firepath安装--火狐插件 3.