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 相关文章推荐
jQuery 页面 Mask实现代码
Jan 09 Javascript
JavaScript学习笔记(十)
Jan 17 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
举例讲解Node.js中的Writable对象
Jul 29 Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 Javascript
jstree单选功能的实现方法
Jun 07 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 Javascript
微信小程序云开发(数据库)详解
May 17 Javascript
vue2路由基本用法实例分析
Mar 06 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
探讨多键值cookie(php中cookie存取数组)的详解
2013/06/06 PHP
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
javascript之更有效率的字符串替换
2008/08/02 Javascript
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
Bootstrap基础学习
2015/06/16 Javascript
jQuery实现form表单元素序列化为json对象的方法
2015/12/09 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
Typescript的三种运行方式(小结)
2019/09/18 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
Python random模块(获取随机数)常用方法和使用例子
2014/05/13 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
总结30个CSS3选择器
2017/04/13 HTML / CSS
html5图片上传预览示例分享
2014/04/14 HTML / CSS
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
C#面试题问题集
2016/04/02 面试题
英文导游欢迎词
2014/01/11 职场文书
学生评语大全
2014/04/18 职场文书
推荐信怎么写
2014/05/09 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
优秀大学生事迹材料
2014/12/24 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python