Javascript 特效(一)返回顶部
<!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 特效(一)返回顶部的更多相关文章
- javascript 缓动返回顶部案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
- 【JavaScript&jQuery】返回顶部
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- javascript实现网页返回顶部功能
在浏览网页时,我们一般是拖动滚动条向下滑动,浏览下面的内容,当页面超过单页时,右下角会出现一个回到顶部的图标,有些网站这个图标一直显示在右下角的. 有些网站使用锚链接来实现页面内容的跳转,但这种效果的 ...
- JavaScript实现减速返回顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery类级别插件--返回顶部,底部,去到任何部位
先引入js:<script type="text/javascript" src="jquery.js" ></script><s ...
- [html][转]常用返回顶部代码
转至:http://jingyan.baidu.com/article/7082dc1ca6b928e40a89bd1a.html 一.使用HTML的锚标记最简单了 但是唯一的缺点就是样式不怎么样,会 ...
- JavaScript返回顶部特效
样式: <style type="text/css"> /*返回顶部特效*/ a { border: none; text-decoration: none; outl ...
- 使用Javascript实现返回顶部功能。
为了提高网站的浏览体验及友好度,相信大部分网站需要一个返回顶部的按钮,如果使用传统的a标记,再做一个div加上链接的话,非常麻烦,不仅每个页面都需要添加,而且不能实现非常智能的效果及简化维护时间. 下 ...
- javascript 特效实现(2)——回到顶部效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- c# applibrary实现一个Sheet表中存放多张DataTable数据
1.工具类(applibrary.dll) public class ExcelHelper { /// <summary> /// 文件名 /// </summary> pu ...
- Linux文件的建立、复制、删除和移动命令
mkdir命令一.mkdir 命令使用权限 所有用户都可以在终端使用 mkdir 命令在拥有权限的文件夹创建文件夹或目录. 二.mkdir 命令使用格式 格式: mkdir [选项] DirName ...
- Tableau10.0学习随记-分组问题
1.根据官网的练习视频,分组时可多选列,之后使用回形针按钮创建分组,并重新命名即可,截图如下: 2.但在Tableau10中打开练习工作簿练习时,并没有直接显示分组后结果,仅仅是创建了分组的纬度,结果 ...
- java selenium (十) 操作浏览器
本篇文章介绍selenium 操作浏览器 阅读目录 浏览器最大化 前进,后退, 刷新 public static void testBrowser(WebDriver driver) throws E ...
- boost::spirit unicode 简用记录
本文简单记录使用boost::spirit解析有中文关键字的字符串并执行响应动作,类似于语法分析+执行. 关键字:字符串解析 boost::spirit::qi::parse qi::unicode: ...
- Swift 08.页面传值
OC中经常用到的一种初始化控制器的方法.比如A push B.并且将A的一个值:value 传递给B 使用.简单的办法就是 在B重构init方法.比如在.h 中定义: - ()initValue:(N ...
- 无边框窗体和timer控件
一.无边框窗体 1.控制按钮如何制作就是放置可以点击的控件,不局限于使用按钮或是什么别的,只要放置的控件可以点击能触发点击事件就可以了 做的好看一点,就是鼠标移入(pictureBox1_MouseE ...
- Linux 文件访问权限
定义:<sys/stat.h> 每个文件有9个访问权限,可将其分为3类: 标记 含义 S_IRUSR 用户读 S_IWUSR 用户写 S_IXUSR 用户执行 S_IRGRP 组读 S_I ...
- 学习winform第三方界面weiFenLuo.winFormsUI.Docking.dll
控件dockpanel中提供了几个可用的类, 重要的有两个, 一是DockPanel, 一是DockContent, DockPanel是从panel继承出来的, 用于提供可浮动的dock的子窗口进行 ...
- [css3]水平垂直居中
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);