ตัวอย่างโค้ดต่อไปนี้ เน้นให้รู้ถึงการประยุกต์ใช้งาน ฟังก์ชัน ของ jQuery โดยในที่นี้ ประกอบไปด้วย
event scroll() เหตุการณ์เมื่อมีการเลื่อน scroll ในที่นี้คือเมื่อเลื่อน scroll หน้าเพจ
scrollTop() หาตำแหน่ง scroll บนสุดของ element ที่มี scrollbar
fadeIn() แสดง element แบบค่อยๆ แสดงแบบจาง
hide() ซ่อน element
animate() สำหรับสร้างการ เคลื่อนไหว ในที่ใช้กับ ส่วนของหน้าเพจ
offset().top สำหรับหาตำแหน่งด้านบน ของ element จากขอบบราวเซอร์ด้านบน
ตัวอย่าง
https://www.ninenik.com/demo/jquery_scroll_top.php
ตัวอย่างโค้ด และการทำงาน คือ เมื่อเราเลื่อน scroll มาถึงตำแหน่งที่กำหดน จะแสดงปุ่ม go to top มุมล่าง
ขวา เมื่อเราคลิกที่ปุ่มดังกล่าว หน้าเพจนั้นก็เลื่อน scrollbar ไปตำแหน่งบนสุดของเพจ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery scroll top</title>
<style type="text/css">
/*
css สำหรับกำหนดปุ่ม go to top แบบชิดขอบล่างขวา แบบ fixed ตำแหน่ง
*/
#gotoTop{
position:fixed;
margin:auto;
right:0px;
bottom:0px;
border:0px;
cursor:pointer;
z-index: 99;
display:none;
}
</style>
</head>
<body>
<?php
for($i=1;$i<=100;$i++){
?>
<div style="background-color:<?=($i%2==0)?"#EAEAEA":"#CCC"?>;"><?=$i?></div>
<?php
}
?>
<img id="gotoTop" src="images/top2e.gif" border="0" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
// เงื่อนไข event เมื่อมีการเลื่อน scrollbar ในหน้าเพจ
$(window).scroll(function(){
if($(document).scrollTop()>100){ // เงื่อนไขขอบบนสุดของ หน้าเพจ มากกว่า 100 pixels หรือไม่
$("#gotoTop").fadeIn(); // ถ้ามากกว่าให้แสดง ปุ่ม go to top
}else{
$("#gotoTop").hide(); // ถ้าน้อยกว่าให้ซ่อน ปุ่ม go to top
}
});
// เงื่อนไขเมื่อมีการคลิกที่ปุ่ม go to top
$("#gotoTop").click(function(){
$('html, body').animate({ // สร้างการเคลื่อนไหว
scrollTop: $(document.body).offset().top // ให้หน้าเพจเลื่อนไปทำตำแหน่งบนสุด
}, 500); // ภายในเวลา 0.5 วินาที ---- 1000 เท่ากับ 1 วินาที
});
});
</script>
</body>
</html>
