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 相关文章推荐
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
js实现音频控制进度条功能
Apr 01 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
微信小程序 动态传参实例详解
Apr 27 Javascript
对vue.js中this.$emit的深入理解
Feb 23 Javascript
11行JS代码制作二维码生成功能
Mar 09 Javascript
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
微信小程序网络封装(简单高效)
Aug 06 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 Javascript
一分钟学会JavaScript中的try-catch
Dec 14 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
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
PHP图片验证码制作实现分享(全)
2012/05/10 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
PHP7匿名类用法分析
2016/09/26 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
js计算页面刷新的次数
2009/07/20 Javascript
javascript 函数调用规则
2009/08/26 Javascript
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
js显示时间 js显示最后修改时间
2013/01/02 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
2014/01/06 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
在Django的模板中使用认证数据的方法
2015/07/23 Python
python使用mysql数据库示例代码
2017/05/21 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
python如何输出反斜杠
2020/06/18 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
JACK & JONES荷兰官网:男士服装和鞋子
2021/03/07 全球购物
大专生毕业的自我评价
2014/02/06 职场文书
国庆节演讲稿
2014/05/27 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
高三英语教学计划
2015/01/23 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
党员干部学习心得体会
2016/01/23 职场文书
Python+uiautomator2实现自动刷抖音视频功能
2021/04/29 Python
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS