<!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>div css3样式表制作jquery返回顶部特效</title>
<meta name="description" content="div css3样式表制作jquery返回顶部按钮，浏览器滚动显示返回顶部按钮，点击滑动返回顶部。jquery下载" />
</head>
<body>
<script src="http://chocotemplates.com/preview/corporate/impact/js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var ScrollToTop=ScrollToTop||{
setup:function(){
var a=$(window).height()/2;
$(window).scroll(function(){
(window.innerWidth?window.pageYOffset:document.documentElement.scrollTop)>=a?$("#ScrollToTop").removeClass("Offscreen"):$("#ScrollToTop").addClass("Offscreen")
});
$("#ScrollToTop").click(function(){
$("html, body").animate({scrollTop:"0px"},400);
return false
})
}
};
</script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body {font-family:"helvetica neue",arial,sans-serif;font-size:12px;color:#211922;}
.btnimg{cursor:pointer;border:0;margin:0;padding:0;}
#ScrollToTop{
position:fixed;_position:absolute;z-index:4;right:15px;bottom:-10px;width:70px;padding:20px 10px 30px;display:block;font-size:15px;font-weight:800;text-align:center;border-width:1px 1px 0 1px;border-style:solid;
box-shadow:0 0 #fff, 0 1px 3px rgba(34,25,25,0.5);
-moz-box-shadow:0 0 #fff, 0 1px 3px rgba(34,25,25,0.5);
-webkit-box-shadow:0 0 #fff, 0 1px 3px rgba(34,25,25,0.5);
-moz-transition:bottom 250ms ease-in-out;
-webkit-transition: bottom 250ms ease-in-out;
}
#ScrollToTop.Offscreen{
bottom:-100px;
-moz-transition-duration:250ms;
-webkit-transition-duration:250ms;
}
/* White Button */
.Button2.WhiteButton{
background-color:#f0eded;
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#fdfafb), to(#f0eded), color-stop(.5,#f9f7f7),color-stop(.5,#f6f3f4));
background-image:-moz-linear-gradient(top, #fdfafb, #f9f7f7 50%, #f6f3f4 50%, #f0eded);
background-image:-o-linear-gradient(top, #fdfafb, #f9f7f7 50%, #f6f3f4 50%, #f0eded);
background-image:-webkit-linear-gradient(top, #fdfafb, #f9f7f7 50%, #f6f3f4 50%, #f0eded);
border-color:#bbb;
color:#524d4d;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdfafb', endColorstr='#f0eded');
text-shadow:0 1px rgba(255,255,255,0.9);
}
.Button2.WhiteButton:hover{
background-color:#f2f0f0;
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#fdfcfc), to(#f2f0f0), color-stop(.5,#fbf9f9),color-stop(.5,#f7f5f6));
background-image:-moz-linear-gradient(top, #fdfcfc, #fbf9f9 50%, #f7f5f6 50%, #f2f0f0);
background-image:-o-linear-gradient(top, #fdfcfc, #fbf9f9 50%, #f7f5f6 50%, #f2f0f0);
background-image:-webkit-linear-gradient(top, #fdfcfc, #fbf9f9 50%, #f7f5f6 50%, #f2f0f0);
border-color:#c3c3c3;
color:#666060;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdfcfc', endColorstr='#f2f0f0');
text-shadow:0 1px rgba(255,255,255,1);
}
.Button2.WhiteButton:active{
background-color:#ebe8e8;
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f8f4f5), to(#ebe8e8), color-stop(.5,#f3f0f0),color-stop(.5,#f1eeef));
background-image:-moz-linear-gradient(top, #f8f4f5, #f3f0f0 50%, #f1eeef 50%, #ebe8e8);
background-image:-o-linear-gradient(top, #f8f4f5, #f3f0f0 50%, #f1eeef 50%, #ebe8e8);
background-image:-webkit-linear-gradient(top, #f8f4f5, #f3f0f0 50%, #f1eeef 50%, #ebe8e8);
border-color:#b7b7b7;
color:#454141;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f4f5', endColorstr='#ebe8e8');
text-shadow:0 1px rgba(255,255,255,0.8);
}
</style>
<div style="height:2000px;"></div>
<button id="ScrollToTop" class="btnimg Button2 WhiteButton Offscreen" type="button">返回<br />顶部</button>
<script type="text/javascript">
$(document).ready(function(){
ScrollToTop.setup();
});
</script>
</body>
</html>
