Discuz修改“返回顶部”图标教程，附懒人包

Discuz修改“返回顶部”图标教程   

本站的返回顶部按钮展示：  

  

懒人包下载http://www.xdmqq.cn/thread-477-1-1.html

相信有不少站长不太喜欢Discuz官方默认模板“返回顶部”图标，那要怎么修改“返回顶部”图标呢？以下给出我的方法和步骤：
      1、获得自己喜欢“返回顶部”图标，上传覆盖Discuz原图标  
①获取自己喜欢的图标，网上搜索一大堆，关键词：返回顶部图标素材
②“返回顶部”图标所在目录路径：/static/image/common/scrolltop.png   然后将自己图标上传覆盖，完成后进行下一步。
      2、修改相关css参数，修改返回顶部图标的尺寸
由于您的图标不一定和原本图标尺寸一致，所以覆盖后，会显示不全，所以要修改相关css参数，修改返回顶部图标的尺寸。
返回顶部图标css文件目录路径：/template/default/common/common.css
打开编辑找到代码

1. #scrolltop { visibility: hidden; position: fixed; bottom: 100px; display: block; margin: -30px 0 0 2px; width: 40px; background: #f4f4f4; border: 1px #cdcdcd solid; border-radius: 3px; border-top: 0; cursor: pointer; }
   
2. #scrolltop:hover { text-decoration: none; }
   
3. .ie6 #scrolltop { position: absolute; bottom: auto; }
   
4. #scrolltop a { display: block; width: 30px; height: 24px; padding: 3px 5px; line-height: 12px; text-align: center; color: #787878; text-decoration: none; background: url({IMGDIR}/scrolltop.png) no-repeat 0 0; border-top: 1px #cdcdcd solid; }
   
5. a.scrolltopa:hover { background-position: -40px 0px !important;}
   
6. a.replyfast { background-position: 0 -30px !important; }
   
7. a.replyfast:hover { background-position: -40px -30px !important;}
   
8. a.returnlist,a.returnboard { background-position: 0 -60px !important; }
   
9. a.returnlist:hover,a.returnboard:hover { background-position: -40px -60px !important;}
   
10. #scrolltop a b { visibility: hidden; font-weight: normal; }

复制代码

（打开css文件，直接搜索scrolltop，可以快速找到此段代码）
修改为

1. #scrolltop { visibility: hidden; position: fixed; bottom: 100px; display: block; margin: -30px 0 0; width: 66px; height: 110px; background: url({IMGDIR}/scrolltop.png) no-repeat 50% 0; line-height: 999px; overflow: hidden; cursor: pointer; }

复制代码

其中width和height分别对应图标的宽度和高度，例如：若图标尺寸是66X110，那么代码中的宽度和高度修改成：width: 60px;height: 11px;
修改完毕后，上传覆盖，修改返回顶部图标成功！
注（转载请保留）：本文原创！兄弟盟QQ空间社区（http://www.xdmqq.cn）首发！
原文地址：http://www.xdmqq.cn/thread-477-1-1.html
若教程失效，或者教程有误请评论反馈，谢谢

支持LZ分享  

支持楼主