jquery超可爱的星空火箭置顶
jquery超可爱的星空火箭置顶
html:
Markup
<body style="height:2000px;">
<div class="actGotop"><a href="javascript:;" title="返回顶部"></a></div>css:
CSS
*{
margin:0;
padding:0;
list-style-type:none;
}
a,img{
border:0;
}
body{
background:url(img/blog7year_videobg.png);
font:12px/180% Arial, Helvetica, sans-serif, "新宋体";
}
.actGotop{
position:fixed;
_position:absolute;
bottom:100px;
right:50px;
width:150px;
height:195px;
display:none;
}
.actGotop a,.actGotop a:link{
width:150px;
height:195px;
display:inline-block;
background:url(img/blog7year_gotop.png) no-repeat;
outline:none;
}
.actGotop a:hover{
background:url(img/blog7year_gotopd.gif) no-repeat;
outline:none;
}jq:
JavaScript
$(function(){
$(window).scroll(function(){
if($(this).scrollTop()>=100){
// 窗体滚动条，卷上去的距离大于100像素，让按钮（返回按钮） 慢慢的 淡入
$('.actGotop').fadeIn();
}else{
// 窗体滚动条，卷上去的距离小于100像素，让按钮（返回按钮） 慢慢的 淡出
$('.actGotop').fadeOut();
}
})
// 给按钮（返回按钮），注册 一个 单击事件
$('.actGotop').click(function(){
// 给html标签 添加一个 自定义动画
$('html').animate({
"scrollTop":0
},800)
})
})
