SMF back to top (Jquey) ทำปุ่มดีดกลับขึ้นบน ในบอร์ด smf

[Auto Man]

ตรงนี้มีภาพ! แต่ท่านจะมองไม่เห็น , ท่านต้อง  สมัครสมาชิก หรือ ลงชื่อเข้าระบบ


ack to top คือปุ่มทางลัดกลับสู่ด้านบนสุดโดยเร็ว สังเกตุด้านขวามือล่างเมื่อเลื่อนเมาส์ทลงไปดูบทความยาวๆด้านล่าง มันจะเกิดปุ่มนี้ขึ้นมาให้โดยอัตโนมัติ เพื่อให้กดดีดกลับไปยังด้านบนสุดเร็วแบบอัตโนมัติ โดยไม่ต้องค่อยๆย้อนเลื่อน สกอร์บาร์ กลับขึ้นไปเองให้เสียเวลา

edit แก้ไข :  Themes/default หรือธีมที่ใช้/index.template.php

find ค้นหา :

โค๊ด: [Select]

   // Here comes the JavaScript bits!
   echo '
Add before วางก่อนที่หา :

โค๊ด: [Select]

   //Back to top Welovethailand.com
   echo'<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
   <script type="text/javascript">
   $(document).ready(function(){
   $("#back-top").hide();
   $(function () {
      $(window).scroll(function () {
         if ($(this).scrollTop() > 100) {
            $("#back-top").fadeIn();
         } else {
            $("#back-top").fadeOut();
         }
      });
      $("#back-top a").click(function () {
         $("body,html").animate({
            scrollTop: 0
         }, 800);
         return false;
      });
   });
});
</script>';
find ค้นหา :

โค๊ด: [Select]

   // Show the load time?
Add before วางก่อนที่หา :

โค๊ด: [Select]

   echo '<div id="back-top">
      <a href="#top"><span></span>Back to Top[/url]
   </div>';
รูปแบบ Style มีด้วยกัน 2 แบบ (เลือกใช้แบบใดแบบหนึ่งเท่านั้น !)
แบบที่ Style 1 สี่เหลี่ยมขอบมล

ตรงนี้มีภาพ! แต่ท่านจะมองไม่เห็น , ท่านต้อง  สมัครสมาชิก หรือ ลงชื่อเข้าระบบ


edit แก้ไข :  Themes/default หรือธีมที่ใช้/css/index.css
Add at the end of the file เติมต่อท้ายสุด :

โค๊ด: [Select]

/*Back to top button */
#back-top {
   position: fixed;
   bottom: 30px;
   right: 10px;
}
#back-top a {
   width: 88px;
   display: block;
   text-align: center;
   font: 11px/100% Arial, Helvetica, sans-serif;
   text-transform: uppercase;
   text-decoration: none;
   color: #bbb;
   -webkit-transition: 1s;
   -moz-transition: 1s;
   transition: 1s;
}
#back-top a:hover {
   color: #000;
}
/* arrow icon (span tag) */
#back-top span {
   width: 88px;
   height: 88px;
   display: block;
   margin-bottom: 7px;
   background: #ddd url(../images/up-arrow.png) no-repeat center center;
   /* rounded corners */
   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   border-radius: 15px;
   -webkit-transition: 1s;
   -moz-transition: 1s;
   transition: 1s;
}
#back-top a:hover span {
   background-color: #777;
}
เซฟรูปลูกศร  up-arrow.png  ไปใส่ที่ /Themes/default หรือธีมที่ใช้/images/

ตรงนี้มีภาพ! แต่ท่านจะมองไม่เห็น , ท่านต้อง  สมัครสมาชิก หรือ ลงชื่อเข้าระบบ


Save arrow image up-arrow.png into/Themes/default or Your theme/images/

แบบที่ Style 2 วงกลม Gradient Color

ตรงนี้มีภาพ! แต่ท่านจะมองไม่เห็น , ท่านต้อง  สมัครสมาชิก หรือ ลงชื่อเข้าระบบ


edit แก้ไข :  Themes/default หรือธีมที่ใช้/css/index.css
Add at the end of the file เติมต่อท้ายสุด :

โค๊ด: [Select]

/*Back to top button */
#back-top {
   position: fixed;
   bottom: 30px;
   right: 10px;
}
#back-top a {
   width: 79px;
   display: block;
   text-align: center;
   font: 11px/100% Arial, Helvetica, sans-serif;
   text-transform: uppercase;
   text-decoration: none;
   color: #3093c7;
   -webkit-transition: 1s;
   -moz-transition: 1s;
   transition: 1s;
}
#back-top a:hover {
   color: #0F314A;
}
/* arrow icon (span tag) */
#back-top span:before {
      content: ' ';
   width: 69px;
   height: 69px;
   margin-bottom: 7px;
   /* rounded corners */
   border-top-color: #25729a;border-right-color: #25729a;border-bottom-color: #25729a;border-left-color: #25729a;border-width: 0px;border-style: solid; -webkit-border-radius: 50px; -moz-border-radius: 50px;border-radius: 50px;display:inline-block;
 background-color: #3093c7; background-image: -webkit-gradient(linear, left top, left bottom, from(#3093c7), to(#1c5a85));
 background-image: -webkit-linear-gradient(top, #3093c7, #1c5a85);
 background-image: -moz-linear-gradient(top, #3093c7, #1c5a85);
 background-image: -ms-linear-gradient(top, #3093c7, #1c5a85);
 background-image: -o-linear-gradient(top, #3093c7, #1c5a85);
 background-image: linear-gradient(to bottom, #3093c7, #1c5a85);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#3093c7, endColorstr=#1c5a85);
   /* background color transition */
   -webkit-transition: 1s;
   -moz-transition: 1s;
   transition: 1s;
}
#back-top a:hover span:before {
      content: ' ';
 border:0px solid #1c5675;
 background-color: #26759e; background-image: -webkit-gradient(linear, left top, left bottom, from(#26759e), to(#133d5b));
 background-image: -webkit-linear-gradient(top, #26759e, #133d5b);
 background-image: -moz-linear-gradient(top, #26759e, #133d5b);
 background-image: -ms-linear-gradient(top, #26759e, #133d5b);
 background-image: -o-linear-gradient(top, #26759e, #133d5b);
 background-image: linear-gradient(to bottom, #26759e, #133d5b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#26759e, endColorstr=#133d5b);
}
#back-top span:after {
background: url(../images/top-arrow.png) no-repeat;
content:' ';
width:45px;
height:45px;
left:17px;
bottom:30px;
position:absolute;
}
เซฟรูปลูกศร  top-arrow.png  ไปใส่ที่ /Themes/default หรือธีมที่ใช้/images/

ตรงนี้มีภาพ! แต่ท่านจะมองไม่เห็น , ท่านต้อง  สมัครสมาชิก หรือ ลงชื่อเข้าระบบ


Save arrow image top-arrow.png into/Themes/default or Your theme/images/

ตรงนี้มีภาพ! แต่ท่านจะมองไม่เห็น , ท่านต้อง  สมัครสมาชิก หรือ ลงชื่อเข้าระบบ


* ปรับตำแหน่งปุ่มให้ห่างจากขวา-ล่าง ที่ class ตัวแรกสุด #back-top , bottom: 30px; , right: 10px;