如何用jQuery写出仿腾讯返回顶部按钮效果？

周洲 2017-04-07 11:02:45

<!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=gb2312" />
<meta name="keywords" content="http://www.baiduyo.com"/>
<meta name="description" content="http://www.baiduyo.com" />
<title>返回顶部</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">
* {
    padding:0;
	margin:0;
}
*html {
    background-image:url(about:blank);
	background-attachment:fixed;
}
#pinglun,#xiangguan,#gotop {
    display:block;
    width:54px;
	height:56px;
	background:url(images/icon.png) no-repeat;
}
#tbox {
    width:54px;
	float:right;
	position:fixed;
	right:50px;
	bottom:15px;
	_position:absolute;
    _bottom:auto;
	_margin-bottom:15px;
	_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}
#pinglun {
    background-position:0 0;
}
#xiangguan {
    background-position:0 -59px;
}
#gotop {
    background-position:0 -118px;
}
</style>
<script type="text/javascript">
function b () {
	var h = $(window).height();
	var t = $(document).scrollTop();
	if (t > h) {
		$('#gotop').show();
	} else {
		$('#gotop').hide();
	}
};

$(document).ready(function (e) {
	b();
	$('#gotop').click(function () {
		$(document).scrollTop(0);
	});	
});

$(window).scroll(function (e) {
	b();
});
</script>
</head>
<body>

<div id="box" style="width:20px;height:2000px;background:red"></div>


<div id="tbox">
    <a id="pinglun" href="http://www.baiduyo.com" title="如果您有意见，请反馈给我们！"></a>
	<a id="xiangguan" href="http://www.baiduyo.com" title="关于"></a>
	<a id="gotop" href="http://www.baiduyo.com" title="返回顶部"></a>
</div>



</body>
</html>