js实现漂浮回顶部按钮实例


Posted in Javascript onMay 06, 2015

本文实例讲述了js实现漂浮回顶部按钮的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>漂浮回顶部按钮</title>
<style>
body{
height:2000px;
}
.rTop{
width:100px; height:25px;
text-align:center; font-size:small;
line-height:25px; border:1px solid #999;
position:fixed; right:0; bottom:0;
border-bottom-color:#333; 
border-right-color:#333; margin:5px;
cursor:pointer; display:none
}
</style>
<script>
<!--拖动滚动条或滚动鼠标轮-->
window.onscroll=function(){
if(document.body.scrollTop||document.documentElement.scrollTop>0){
document.getElementById('rTop').style.display="block"
}else{
document.getElementById('rTop').style.display="none"
}
}
<!--点击“回到顶部”按钮-->
function toTop(){
window.scrollTo('0','0');
document.getElementById('rTop').style.display="none"
}
</script>
</head>
<body>
<div class="rTop" id="rTop" onClick="toTop()">返回顶部</div>
<h1>顶部</h1>
<h1>测试</h1><p></p><h1>测试</h1><p></p><h1>测试</h1><p></p>
<h1>测试</h1><p></p><h1>测试</h1><p></p><h1>测试</h1><p></p>
<h1>测试</h1><p></p><h1>测试</h1><p></p><h1>测试</h1><p></p>
<h1>测试</h1><p></p><h1>测试</h1><p></p><h1>测试</h1><p></p>
<h1>测试</h1><p></p><h1>测试</h1><p></p><h1>测试</h1><p></p>
<h1>测试</h1><p></p><h1>测试</h1><p></p><h1>测试</h1><p></p>
<h1>测试</h1><p></p><h1>测试</h1><p></p><h1>测试</h1><p></p>
<h1>底部</h1>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
document.open() 与 document.write()的区别
Aug 13 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
Oct 30 Javascript
javascript实现全角与半角字符的转换
Jan 07 Javascript
js实现鼠标划过给div加透明度的方法
May 25 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
js选择器全面解析
Jun 27 Javascript
jQuery操作iframe中js函数的方法小结
Jul 06 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
AngularJs 延时器、计时器实例代码
Sep 16 Javascript
微信小程序实现图片滚动效果示例
Dec 05 Javascript
在webstorm中配置less的方法详解
Sep 25 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 #Javascript
js中日期的加减法
May 06 #Javascript
javascript实现回到顶部特效
May 06 #Javascript
javascript实现完美拖拽效果
May 06 #Javascript
avalonjs实现仿微博的图片拖动特效
May 06 #Javascript
avalonjs制作响应式瀑布流特效
May 06 #Javascript
javascript实现简单的html5视频播放器
May 06 #Javascript
You might like
PHP中数据类型转换的三种方式
2015/04/02 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
PHP使用token防止表单重复提交的方法
2016/04/07 PHP
Javascript 解疑
2009/11/11 Javascript
jquery 应用代码 方便的排序功能
2010/02/06 Javascript
js 数组的for循环到底应该怎么写?
2010/05/31 Javascript
JavaScript开发规范要求(规范化代码)
2010/08/16 Javascript
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
JavaScript学习小结(一)——JavaScript入门基础
2015/09/02 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
2018/09/14 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
在Python中处理列表之reverse()方法的使用教程
2015/05/21 Python
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
python读取文件指定行内容实例讲解
2020/03/02 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
旅游饭店管理专业自荐书
2014/06/28 职场文书
2014年教学工作总结
2014/11/13 职场文书
工作保证书
2015/01/17 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
话题作文之诚信
2019/11/28 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL