<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>置顶</title>
<style type="text/css">
body
{
height: 3000px;
}
#divUpDown
{
position: fixed;
top: 300px;
right: 2px;
}
#divUpDown span
{
cursor: pointer;
48px;
height: 48px;
display: block;
}
#divUpDown .top
{
background: url(images/updown.png) left top no-repeat;
}
#divUpDown .top:hover
{
background: url(images/updown.png) right top no-repeat;
}
#divUpDown .bottom
{
background: url(images/updown.png) left bottom no-repeat;
}
#divUpDown .bottom:hover
{
background: url(images/updown.png) right bottom no-repeat;
}
</style>
<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//滚动时 控制置顶div的显示与隐藏
$(window).scroll(function () {
if ($(window).scrollTop()>400) {
$("#divUpDown").fadeIn(200);
}
else {
$("#divUpDown").fadeOut(200);
}
});
$("#divUpDown .top").click(function () { $("html,body").animate({ scrollTop: "0px" }, 500); });
$("#divUpDown .bottom").click(function () { $("html,body").animate({ scrollTop: $(document).height() + "px" }, 500); });
});
</script>
</head>
<body>
<div id="divUpDown">
<span class="top"></span>
<span class="bottom"></span>
</div>
</body>
</html>
用到的图片