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 相关文章推荐
JAVASCRIPT对象及属性
Feb 13 Javascript
javascript 三种编解码方式
Feb 01 Javascript
一个简单的js树形菜单
Dec 09 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
浅析js的模块化编写 require.js
Dec 07 Javascript
Html中 IFrame的用法及注意点
Dec 22 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
vue-cli3.0 特性解读
Apr 22 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
Oct 20 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
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实现更新中间关联表数据的两种方法
2014/09/01 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
Js的MessageBox
2006/12/03 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
2013/10/09 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
2017/07/28 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
VUE渲染后端返回含有script标签的html字符串示例
2019/10/28 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
python 实现插入排序算法
2012/06/05 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
python如何修改文件时间属性
2021/02/05 Python
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
人事主管的岗位职责
2013/11/16 职场文书
英文演讲稿
2014/05/15 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
2015年招生工作总结
2015/05/04 职场文书
昆虫记读书笔记
2015/06/26 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
导游词之台湾阿里山
2019/10/23 职场文书
导游词之山西关帝庙
2019/11/01 职场文书