使用jquery實現漂亮的返回頂部、底部和留言
可以點擊這裡體驗效果：http:///keleyi/phtml/totop/1.htm
以下是完整的源代碼：
<!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>
<title>漂亮的返回頂部、底部和留言--</title>
<style type="text/css">
.keleyigo{width:47px;height:106px;background-color:#FFF;position:fixed;_position:absolute;right:12px;bottom:10%;border-radius:5px;box-shadow:0 0 2px #6E6E6E;}
.keleyigo a{background:url(images/a.png) no-repeat;display:block;text-indent:999em;line-height:999px;width:37px;margin:5px;border:0;overflow:hidden;float:left}
.keleyigo .top{background-position:0 -33px;height:22px}
.keleyigo .feedback{background-position:0 -54px;height:32px}
.keleyigo .bottom{background-position:0 -88px;height:22px}
.keleyigo .top:hover{background-position:-38px -33px}
.keleyigo .feedback:hover{background-position:-38px -54px}
.keleyigo .bottom:hover{background-position:-38px -88px}
body{margin:0px;}
</style>
</head>
<body>
<div style="background-color:#959822; width:100%;height:150px;">請點右下角擊上下箭頭</div>
<div style="background-color:Green; width:100%;height:150px;">www.<a href="http:///dev/94fb5964c80ee829.htm" target="_blank">圖片返回頂部效果</a></div>
<div style="background-color:Red; width:100%;height:150px;">歡迎</div>
<div style="background-color:Silver; width:100%;height:150px;"></div>
<div style="background-color:Aqua; width:100%;height:150px;"></div>
<div style="background-color:Fuchsia; width:100%;height:150px;">keleyi</div>
<div style="background-color:Green; width:100%;height:150px;"></div>
<div style="background-color:Blue; width:100%;height:150px;"></div>
<div style="background-color:Olive; width:100%;height:150px;">返回頂部<a href="http:///a/bjac/8aa32432160f9aa4.htm" target="_blank">原文</a></div>
<div style="background-color:Green; width:100%;height:150px;">A</div>
<div style="background-color:Purple; width:100%;height:150px;">jquery</div>
<div style="background-color:Green; width:100%;height:150px;"><a href="http:///a/bjac/13639353acde40c.htm" target="_blank">更多</a></div>
<div style="background-color:Lime; width:100%;height:150px;"></div>
<div style="background-color:Orange; width:100%;height:150px;">完整代碼</div>
<div style="height:500px;"></div>
<div style="text-align:center; margin-top:20px;border-top:1px solid red;width:960px; margin-left:auto; margin-right:auto;padding-top:20px;"><a name="gobottom"></a> Copyright<span style="font-family:Arial;">©</span> <span style="font-size:18px;">
</span></div>
<div class="keleyigo">
<a title="返回頂部" class="top" id="gotop_keleyi_com" href="javascript:;">至頂</a>
<a title="如果您有意見，請反饋給我們！" class="feedback" href="http://cms./guestbook/add/" target="_blank" rel="nofollow" >反饋</a>
<a title="返回底部" class="bottom" href="#gobottom">至底</a>
</div>
<script type="text/javascript" src="http:///keleyi/pmedia/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//當點擊跳轉鏈接後，回到頁面頂部位置
$("#gotop_keleyi_com").click(function () {
$('body,html').animate({ scrollTop: 0 }, 0);
return false;
});
})
</script>
</body>
</html>