wordpress CMS主题 微信
Home > 网站建设 > 网页返回顶部返回底部的代码

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

高时银博客 网站建设 点击: 2,161 次 0 0

做网站的时,时时会想到怎样方便用户的使用,毕竟用户的体验才是最最重要的。今天,就跟大家分享一下用户体验也很重要的一个小环节:点击按钮让网页快速返回顶部或底部。网页返回顶部返回底部的代码如下:

<div id="shangxia">
<a href="#top"> <div id="shang" title="↑ 返回顶部"></div></a>
<a href="#bottom"><div id="xia" title="↓ 移至底部"></div></a>
<div id="myrss" title="<?php echo get_option('swt_rss'); ?>" onClick="window.open('<?php echo get_option('swt_rsssub'); ?>','_blank');"></div>
</div>
<a name="bottom">

其中的蓝色字体是返回的代码,红色是我网站的babo图片(可以不用)。还需要CSS代码来定位这些图片。
#shangxia{position:fixed;top:45%;right:45%;display:block;margin-right:-508px; z-index:999;}
#shang,#comt,#xia{background:url(images/huadong.png) no-repeat;position:relative;cursor:pointer;height:25px;width:29px;margin:10px 0 0;}
#comt{background-position:left -30px;height:32px;}
#xia{background-position:left -68px;}
#comt:hover{background-position:right -30px;}
#shang:hover{background-position:right top;}
#xia:hover{background-position:right -68px ;}
#myrss {background:url(images/rss.png) no-repeat;height:120px;width:120px;margin:20px 0 0 -60px;position:relative;cursor:pointer;}

这样,类似于我网站的“返回顶部近回底部代码”就这样了。大家可以试试。非常实用。

 


文章作者:高时银博客
本文地址:http://wanlimm.com/7720130904554.html
版权所有 © 转载时必须以链接形式注明作者和原始出处!

目前还没有评论。赶快来坐沙发吧。

发表评论