基于jQuery返回顶部特效

时间：2022-06-25 20:39:10 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

<!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>基于jQuery返回顶部特效</title>
</head>
<body>
<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
/*返回顶部*/
#roll_top {position:relative; margin-bottom:1px;cursor:pointer;display:block;background:#ddd;}
#roll_top:hover {background:#666;}
#roll {position:fixed;right:30px;bottom:50px;
	_position:absolute;
	_margin-top:300px;
	_bottom:auto;
	_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-40-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}
</style>

1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111

1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 
1111 

<div id="roll"> <a title="回顶部" id="roll_top" href="javascript:;" style="display: block; "></a> </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function(){
/*返回顶部与找客服*/
var jq=jQuery;
jq('#roll_top').hide();
jq(window).scroll(function () {
if (jq(window).scrollTop() > 0) {
jq('#roll_top').fadeIn(400);//当滑动栏向下滑动时，按钮渐现的时间
} else {
jq('#roll_top').fadeOut(200);//当页面回到顶部第一屏时，按钮渐隐的时间
}
});
jq('#roll_top').click(function () {
jq('html,body').animate({
scrollTop : '0px'
}, 200);//返回顶部所用的时间 
});
});
</script>
</body>
</html>
</td>
	 </tr>
	</table>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

基于jQuery返回顶部特效

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程