网页返回顶部和返回底部代码

chenyajun  2020-01-29 15:33:40  阅读 2526 次 评论 0 条
<!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" />
<title>网页返回顶部和返回底部代码</title>
<style type="text/css">
*{padding:0;margin:0}
p{line-height:28px}

.go{width:47px;height:106px;background-color:#FFF;position:fixed;_position:absolute;right:12px;bottom:25%;border-radius:5px;box-shadow:0 0 2px #6E6E6E}
.go a{background:url(yanshi88/images/a.png) no-repeat;display:block;text-indent:999em;line-height:999px;width:37px;margin:5px;border:0;overflow:hidden;float:left}
.go .top{background-position:0 -33px;height:22px}
.go .feedback{background-position:0 -54px;height:32px}
.go .bottom{background-position:0 -88px;height:22px}
.go .top:hover{background-position:-38px -33px}
.go .feedback:hover{background-position:-38px -54px}
.go .bottom:hover{background-position:-38px -88px}
</style> 
</head>

<body style="text-align:center">

<a name="gotop"></a>
<div style="width:980px;height:2000px;background:#fff;margin:0 auto;"></div>
<a name="gobottom"></a>
<div class="go">
	<a title="返回顶部" class="top" href="#gotop">至顶</a>
	<a title="如果您有意见,请反馈给我们!" class="feedback" href="http://www.555.com" target="_blank">反馈</a>
	<a title="返回底部" class="bottom" href="#gobottom">至底</a>
</div>
</body>
</html>


本文地址:http://chenyajun.net/index.php/post/38.html
版权声明:本文为原创文章,版权归 chenyajun 所有,欢迎分享本文,转载请保留出处!

评论已关闭!