分享

给网站加上超漂亮的TOP返回顶部按钮功能——站长之家 - 全球中文站长 dosxp.com...

 昵称3024403 2011-01-10

给网站加上超漂亮的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

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多