基于jQuery返回顶部特效

作者：袖梨 2022-06-25

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

<!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返回顶部特效

相关文章

精彩推荐