免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
Board logo

標題: [教學 ]返回顶部加强版及释义For Leots [打印本頁]
作者: leots    時間: 2012-7-12 16:33     標題: [教學 ]返回顶部加强版及释义For Leots

本帖最後由 bossll 於 2012-11-28 18:10 編輯

在后台修改模板forumdisplay和index_header，在适当位置添加
  1. <div id="shangxia"><div id="shang"></div><div id="xia"></div></div>
複製代碼
修改模板viewthread，在适当位置添加
  1. <div id="shangxia"><div id="shang"></div><div id="comt"></div><div id="xia"></div></div>
複製代碼
修改模板css_append ，添加
  1. #shangxia{position:fixed;top:40%;left:50%;margin-left:-520px;display:block;}

  3. /* 使用fixed使id=“shangxia”的对象固定于浏览器中，相对的上距离为40%，左距离为50%（即居中），然后向左移动520px（需自行调整！！！） */

  5. #shang{background:url(http://it.gain.tw/attachments/month_1207/12071215354e27e2328bfc204e.png) no-repeat;position:relative;cursor:pointer;height:15px;width:29px;margin:10px 0;}

  7. #xia{background:url(http://it.gain.tw/attachments/month_1207/1207121535b17b8cb0a349e0d7.png) no-repeat;position:relative;cursor:pointer;height:15px;width:29px;margin:10px 0;}

  9. #comt{background:url(http://it.gain.tw/attachments/month_1207/1207121535cfd0a834ded71e5b.png) no-repeat;position:relative;cursor:pointer;height:27px;width:29px;margin:10px 0;}
  10. #shang:hover{background:url(http://it.gain.tw/attachments/month_1207/1207121535b200f367042f36bf.png) no-repeat;}
  11. #xia:hover{background:url(http://it.gain.tw/attachments/month_1207/1207121535c1fa003c6337c8d5.png) no-repeat;}
  12. #comt:hover{background:url(http://it.gain.tw/attachments/month_1207/1207121535f2eca7200cb46803.png) no-repeat;}
複製代碼
后台第三方代码添加：
  1. <script>
  2. $jq('#shang').click(function(){$jq('html,body').animate({scrollTop: '0px'}, 800);});

  4. //点击id="shang"对象时，滑动至相对浏览器滚动条为0px（即顶部），时间为800毫秒

  6. $jq('#comt').click(function(){$jq('html,body').animate({scrollTop:$jq('.editor_tb').offset().top}, 800);});

  8. //点击id="comt"对象时，滑动至id="comment"相对浏览器滚动条的距离，时间为800毫秒

  10. $jq('#xia').click(function(){$jq('html,body').animate({scrollTop:$jq('#footer').offset().top}, 800);});
  11. </script>
複製代碼
后台其他头部信息添加：
  1. <script> document.write('<'+'script src="http://it.gain.tw/attachments/month_1207/120712154117c1385272031a4c.attach"></script'+'>') </script>
複製代碼
原作者林木木http://immmmm.com/added-sliding-effect-enhanced.html
活生生的例子：http://it.gain.tw/
顺便说一句，我想找个人一起做个代码站，不知道谁能和我一起做。俗话说一个巴掌拍不响嘛。
邮箱地址：173084705@qq.com
顺便说一下，我不希望这个东西会在不久后在各个插件站满天飞
作者: 章鱼    時間: 2012-7-12 16:52

支持一个
现在SCLUB代码盗版者太多了哎…
作者: 0857    時間: 2012-7-12 17:46

謝謝樓主分享。
作者: liangweisee    時間: 2012-11-24 20:02

返回顶部的代码可谓各种各样啊。
作者: 4rphotoclub    時間: 2012-11-25 12:07

好東西一定要好好學習
作者: bonimon    時間: 2012-11-25 12:34

这个代码视乎太长了，而且也很复杂。
作者: 小枫    時間: 2012-11-30 15:55

好复杂的说……



歡迎光臨 SCLUB免費論壇申請-使用者論壇 (http://sclub.com.tw/discuz/) Powered by Discuz! 7.2