โมปุ่ม to top ขึ้นไปแบบมีสไตล์

jameiiz

ฮัลโหลเว็บมาสเตอร์

คือการทำปุ่มขึ้นไปด้านบนนี้ ผมได้ทดลองมาก่อนหน้าแ้ล้ว ผมคาดว่าปลอดภัยครับ
** แต่ควรสำรองไฟล์ไว้ก่อนด้วยนะครับ

1. ให้เพิ่มโค้ดเหล่านี้ เข้าไปในไฟล์ footer ในโฟลเดอร์สกินของเรา

1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

คัดลอกไปที่คลิปบอร์ด

** ที่ต้องใช้รูปเพราะโค้ดนี้มีปัญหาเรื่อง เวลาโพสมันจะเหลือแค่ <link rel="stylesheet" >

1. <script>
   
2. $(document).ready(function(){
   
3. 
   
4.         // hide #back-top first
   
5.         $("#back-top").hide();
   
6.        
   
7.         // fade in #back-top
   
8.         $(function () {
   
9.                 $(window).scroll(function () {
   
10.                         if ($(this).scrollTop() > 100) {
    
11.                                 $('#back-top').fadeIn();
    
12.                         } else {
    
13.                                 $('#back-top').fadeOut();
    
14.                         }
    
15.                 });
    
16. 
    
17.                 // scroll body to 0px on click
    
18.                 $('#back-top a').click(function () {
    
19.                         $('body,html').animate({
    
20.                                 scrollTop: 0
    
21.                         }, 800);
    
22.                         return false;
    
23.                 });
    
24.         });
    
25. 
    
26. });
    
27. </script>

คัดลอกไปที่คลิปบอร์ด

จะได้ประมาณนี้


2. เปลี่ยนโค้ด div
เปลี่ยนจาก

1. <div id="scrolltop">
   
2.         <!--{if $_G[fid] && $_G['mod'] == 'viewthread'}-->
   
3.         <span><a href="forum.php?mod=post&action=reply&fid=$_G[fid]&tid=$_G[tid]&extra=$_GET[extra]&page=$page{if $_GET[from]}&from=$_GET[from]{/if}" onclick="showWindow('reply', this.href)" class="replyfast" title="{lang fastreply}"><b>{lang fastreply}</b></a></span>
   
4.         <!--{/if}-->
   
5.         <span hidefocus="true"><a title="{lang scrolltop}" onclick="window.scrollTo('0','0')" class="scrolltopa" ><b>{lang scrolltop}</b></a></span>
   
6.         <!--{if $_G[fid]}-->
   
7.         <span>
   
8.                 <!--{if $_G['mod'] == 'viewthread'}-->
   
9.                 <a href="forum.php?mod=forumdisplay&fid=$_G[fid]" hidefocus="true" class="returnlist" title="{lang return_list}"><b>{lang return_list}</b></a>
   
10.                 <!--{else}-->
    
11.                 <a href="forum.php" hidefocus="true" class="returnboard" title="{lang return_forum}"><b>{lang return_forum}</b></a>
    
12.                 <!--{/if}-->
    
13.         </span>
    
14.         <!--{/if}-->
    
15. </div>

คัดลอกไปที่คลิปบอร์ด

ให้เป็น

1. <div id="pagewrap">
   
2.         <p id="back-top">
   
3.                 <a href="#top"><span></span></a>
   
4.         </p>
   
5. 
   
6. </div>

คัดลอกไปที่คลิปบอร์ด

3. เซฟไฟล์ แล้วอัพขึ้นโฮสทับไฟล์เก่าได้เลยครับ

gamezst

ขอบคุณมากครับ

StaFF_PiRcH

ไม่เปลี่ยนรูปเอาอ่ะครับ

jameiiz

กรณีที่อยากให้รูปเป็นเหมือนเดิม ดาวโหลดไฟล์ top.css ไปแก้ไขนะครับ

ดาวโหลด

แล้วแก้ไขที่บรรทัดที่ 43 และ 51 นะครับ เปลี่ยนให้เป็น ../../static/image/common/scrolltop.png หรือไฟล์รูปภาพของคุณครับ