您的位置:首页 - jQuery
漂亮的返回顶部、底部和留言
使用jquery实现漂亮的返回顶部、底部和留言

可以点击这里体验效果:http://keleyi.com/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.keleyi.com<a href="http://keleyi.com/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;">keleyi.com</div>
<div style="background-color:Fuchsia; width:100%;height:150px;">keleyi</div>
<div style="background-color:Green; width:100%;height:150px;">keleyi.com</div>
<div style="background-color:Blue; width:100%;height:150px;">柯乐义</div>
<div style="background-color:Olive; width:100%;height:150px;">返回顶部<a href="http://keleyi.com/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://keleyi.com/a/bjac/13639353acde40c.htm" target="_blank">更多</a></div>
<div style="background-color:Lime; width:100%;height:150px;">keleyi.com</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;">&copy;</span> <span style="font-size:18px;">keleyi.com
</span></div>

<div class="keleyigo">
<a title="返回顶部" class="top" id="gotop_keleyi_com" href="javascript:;">至顶</a>
<a title="如果您有意见,请反馈给我们!" class="feedback" href="http://cms.keleyi.com/guestbook/add/" target="_blank" rel="nofollow" >反馈</a>
<a title="返回底部" class="bottom" href="#gobottom">至底</a>
</div>
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//当点击跳转链接后,回到页面顶部位置 keleyi.com
$("#gotop_keleyi_com").click(function () {
$('body,html').animate({ scrollTop: 0 }, 0);
return false;
});
})
</script>
</body>
</html>
本站导航
相关文章
柯乐义 Copyright© keleyi.com