给网站加上超漂亮的TOP返回顶部按钮功能 来源:本站整理 热量:86 ℃ 生产日期:2010-12-25 22:51
站长之家提醒您:按时吃午饭,有事吃完饭再办也不迟! 站长之家(www.):给网站加上超漂亮的TOP返回顶部按钮功能
网站页面太长,要浏览下面的内容要拖动滚动条。当浏览完下面内容时要返回第一屏时还要再次拖动滚动条才能到达顶端。为了方便访客我们可以为网页加上TOP返回按钮,这样让访客更能感到站长的细心。 下面DOSXP站长之家的stone教大家如何添加这个功能。
第1步.在<HEAD></HEAD>之间加入以下代码:
<script type="text/javascript" src="dosxp_top.js"></script>
第2步.在<BODY></BODY>之间加入以下代码(红,蓝,绿,紫):
想用哪个色的按钮就复制那段代码
【红色】 <div id="full" style="display:none; width:50px; height:95px; position:fixed; left:50%; top:480px; margin-left:493px; z-index:100; text-align:center; cursor:pointer;"><a href='javascript:void(0)'><img src="dosxp_top01.gif" border=0 alt="返回顶部"></a></div>
【蓝色】 <div id="full" style="display:none; width:50px; height:95px; position:fixed; left:50%; top:480px; margin-left:493px; z-index:100; text-align:center; cursor:pointer;"><a href='javascript:void(0)'><img src="dosxp_top.gif" border=0 alt="返回顶部"></a></div>
【绿色】 <div id="full" style="display:none; width:50px; height:95px; position:fixed; left:50%; top:480px; margin-left:493px; z-index:100; text-align:center; cursor:pointer;"><a href='javascript:void(0)'><img src="dosxp_top02.gif" border=0 alt="返回顶部"></a></div>
【紫色】 <div id="full" style="display:none; width:50px; height:95px; position:fixed; left:50%; top:480px; margin-left:493px; z-index:100; text-align:center; cursor:pointer;"><a href='javascript:void(0)'><img src="dosxp_top03.gif" border=0 alt="返回顶部"></a></div>
第3步.附top素材图片及JS文件(红,蓝,绿,紫)
下载我提供的TOP按钮图片及JS文件,上传到你服务器根目录或其它目录下(教程默认根目录)
JS文件andTOP素材
站长之家(www.),自由&共享&快乐 文章来自DOSXP站长之家(www.):http://www./site/885.html
|