源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
查看: 139|回复: 71

[JavaScript] js实现漂浮回顶部按钮实例

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2015-5-6 12:23:50 | 显示全部楼层 |阅读模式
这篇文章主要介绍了js实现漂浮回顶部按钮的方法,实例分析了javascript实现返回顶部功能的样式与动态实现技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

回复

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-8-9 06:54:20 | 显示全部楼层
554411515451555
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

186

积分

注册会员

Rank: 2

积分
186
发表于 2022-9-5 20:11:41 | 显示全部楼层
哈哈哈哈哈哈
回复 支持 反对

使用道具 举报

3

主题

2万

回帖

50

积分

注册会员

Rank: 2

积分
50
发表于 2022-10-21 10:18:53 | 显示全部楼层
看到这帖子真是高兴!
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-11-17 10:49:53 | 显示全部楼层
刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷
回复 支持 反对

使用道具 举报

4

主题

2万

回帖

303

积分

中级会员

Rank: 3Rank: 3

积分
303
发表于 2023-4-15 04:23:16 | 显示全部楼层
哈哈哈哈哈哈哈
回复 支持 反对

使用道具 举报

13

主题

2万

回帖

85

积分

注册会员

Rank: 2

积分
85
发表于 2023-5-12 22:15:31 | 显示全部楼层
呵呵呵呵呵呵
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

319

积分

中级会员

Rank: 3Rank: 3

积分
319
发表于 2023-6-1 20:59:32 | 显示全部楼层
很不错的玩意
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

381

积分

中级会员

Rank: 3Rank: 3

积分
381
发表于 2023-8-21 07:50:44 | 显示全部楼层
vcxvcxv
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-12-11 13:59:45 | 显示全部楼层
谢谢您的分享!
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2025-2-4 04:47 , Processed in 0.232969 second(s), 26 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表