เคยเจอไหมครับ เวลาเราเข้าเว็บไปแล้วเลื่อนอ่านลงไปสักพัก แล้วจะมีปุ่ม เขียนประมาณว่า "กลับไปบนสุด" หรือเป็นรูปลูกศรชี้ขึ้น ในที่นี้เรียกว่าปุ่ม back to top ก็แล้วกันครับ ใครอยากหาวิธีทำเพิ่มเติม แนะนำให้ Search google คำนี้เลยครับ back to top button
ส่วนบทความนี้อีกเช่นเคย แปะไว้กันลืม การทำปุ่ม back to top ครับ
เริ่มจากเราต้องแอด jquery.min.js มาก่อนครับในtag <header>
** jquery.min.js ไปหาโหลดเอาเองได้ทั่วไปนะครับ หรือจะใส่ลิงค์จากต้นทางอื่นๆ ก็ได้นะครับ **
<header>
.
.
<script src="jquery.min.js"></script>
</header>
ขั้นต่อมาให้ใส่โค๊ดตามนี้
<script type='text/javascript'>
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 200) {
$('#scroll').fadeIn();
} else {
$('#scroll').fadeOut();
}
});
$('#scroll').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
</script>
<a href="javascript:void(0);" id="scroll" title="กลับไปบนสุด" style="display: none;">Top<span></span></a>
<script>
var amountScrolled = 300;
$(window).scroll(function() {
if ( $(window).scrollTop() > amountScrolled ) {
$('a.back-to-top').fadeIn('slow');
} else {
$('a.back-to-top').fadeOut('slow');
}
});
</script>
และให้ใส่ใน css ตามนี้
#scroll {
position:fixed;
right:10px;
bottom:10px;
cursor:pointer;
width:50px;
height:50px;
background-color:#3498db;
text-indent:-9999px;
display:none;
-webkit-border-radius:60px;
-moz-border-radius:60px;
border-radius:60px
}
#scroll span {
position:absolute;
top:50%;
left:50%;
margin-left:-8px;
margin-top:-12px;
height:0;
width:0;
border:8px solid transparent;
border-bottom-color:#ffffff;
}
#scroll:hover {
background-color:#e74c3c;
opacity:1;filter:"alpha(opacity=100)";
-ms-filter:"alpha(opacity=100)";
}
 |
| ภาพปุ่ม back-to-top อยู่มุมขวาล่าง |
แค่นี้ครับ โดยที่ตัวอักษรสีแดง หมายถึง ถ้าเลื่อนลงไปกี่พิกเซล ปุ่มถึงจะโผล่มา กำหนดเองได้เลยครับ
ส่วนตัว css นั้นก็กำหนดสีสันของปุ่มได้ครับ แล้วแต่เลยครับ จบฮะ
