码迷,mamicode.com
首页 > 其他好文 > 详细

达到一定高度,回到头部的代码

时间:2015-04-28 14:00:37      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:

<script type="text/javascript">
$(window).scroll(function(){$(this).scrollTop()>400?$(".gotop-btn").css("display","block"):$(".gotop-btn").hide()})
</script><!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>

 

达到一定高度,回到头部的代码

标签:

原文地址:http://www.cnblogs.com/feika/p/4462725.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!