分享个达到一定高度就出现返回顶部按钮的代码

发表于2014-08-01 15:35:27来源于创想网页设计工作室

次点击[] [] [] [打印] [关闭窗口] [评论]

欢迎大家加入创想工作室QQ群 网络瘫痪上不了网?电脑出故障?找破解软件?加入创想工作室QQ群,向大神求助,一步解决问题!QQ群号码:326338868[点此获取更多QQ群]
今天无意间逛360网站发现的,分析了一下代码发现很简洁,所以整理出来分享给有需要的朋友啦。
 
代码中的
<script type="text/javascript">$(window).scroll(function(){$(this).scrollTop()>400?$(".gotop-btn").css("display","block"):$(".gotop-btn").hide()})</script>
数字400改为别的可以控制高度才出现返回顶部的按钮。
怎样,是不是很简单咧?
 
完整代码如下:
<!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>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<style>
@charset "utf-8";
html, body, h1, h2, h3, h4, h5, h6, hr, p, pre, blockquote, dl, dt, dd, ul, ol, li, form, fieldset, legend, input, textarea, button, img { margin:0; padding:0; }
body, button, input, select, textarea { font:14px/1.8 "Microsoft Yahei", tahoma,arial,"Hiragino Sans GB", helvetica, sans-serif; }
img { border:0;}
.wraper { height:2000px; text-align:center; margin:0 auto; padding-top:20px; width:960px; background-color:#F7F7F7; font-size:22px; color:#FF0000; }
.gotop { position:fixed; right:50%; bottom:20px; margin-right:-580px; }
.gotop-btn { display:block; width:62px; height:52px; background:url(images/gotop.png) no-repeat 0 0; text-indent:-9999px; }
.gotop-btn:hover { background-position:0 -54px; }
</style>
<script type="text/javascript" name="jquery" src="js/jquery-1.8.3.js"></script>
</head>
<body>
<div class="wraper">鼠标往下滚动然后注意右下角,有惊喜!</div>
<div class="gotop"><a href="javascript:document.body.scrollTop=0;document.documentElement.scrollTop=0;void(0);" class="gotop-btn" title="回到顶部" style="display:none; ">回到顶部</a></div>
<script type="text/javascript">$(window).scroll(function(){$(this).scrollTop()>400?$(".gotop-btn").css("display","block"):$(".gotop-btn").hide()})</script>
</body>
</html>
 
 

© copyright 2002-2024, 22BA.COM All Rights Reserved

网站备案号:粤ICP备19114910号

ChuangXiang Design Studio - WebDesign & Internet Marketing

关于我们业务范围联系我们开心一刻网站地图

QQ群一:326338868QQ群二:78712271

QQ群三:193078177

邮箱:news@22ba.com

地址:深圳市福田区金田路现代国际大厦2606