ประยุกต์ ฟังก์ชัน animate ใน jQuery เลื่อน scroll หน้าเพจ
01 November 2010ตัวอย่างโค้ดต่อไปนี้ เน้นให้รู้ถึงการประยุกต์ใช้งาน ฟังก์ชัน ของ jQuery โดยในที่นี้ ประกอบไปด้วย
event scroll() เหตุการณ์เมื่อมีการเลื่อน scroll ในที่นี้คือเมื่อเลื่อน scroll หน้าเพจ
scrollTop() หาตำแหน่ง scroll บนสุดของ element ที่มี scrollbar
fadeIn() แสดง element แบบค่อยๆ แสดงแบบจาง
hide() ซ่อน element
animate() สำหรับสร้างการ เคลื่อนไหว ในที่ใช้กับ ส่วนของหน้าเพจ
offset().top สำหรับหาตำแหน่งด้านบน ของ element จากขอบบราวเซอร์ด้านบน
ตัวอย่าง
http://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>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
16 Sep 10 เพิ่มความสะดวก การ insert update delete ข้อมูล ของ mysql ด้วย php function อ่าน 9336 25 Sep 08 ตรวจสอบนามสกุลไฟล์ ก่อนทำการอัพโหลด อ่าน 3863 29 Oct 10 แนะนำ jQuery CountDown plugin สวยๆ สำหรับประยุกต์ใช้งาน อ่าน 3627 13 Oct 08 คำสั่ง SQL IN อ่าน 3414 20 Oct 10 สร้าง video playlist ของ jwplayer jquery plugin ด้วย xml และการใช้งาน อ่าน 4209 27 Jan 10 การใช้งาน jQuery.contains() ใน jQuery 1.4 อ่าน 2462 06 Dec 11 การใช้งาน css จัดตำแหน่ง ซ้อนข้อความบนรูปภาพอย่างง่าย อ่าน 2799 05 Nov 08 CSS สร้างเมนูแนวตั้ง 2 ชั้นโดยไม่ใช้ javascript และตาราง table อ่าน 10700 11 Jan 12 รู้จัก และใช้งาน DATEDIFF() ใน mysql ฟังก์ชัน เทียบช่วงเวลาที่เหลือ อ่าน 1703 02 May 10 ใช้งาน ajax ใน jQuery ดึงข้อมูลจากฐานข้อมูลมาแสดง ใน tooltip อ่าน 7130 15 Mar 11 ทบทวน JavaScript SDK ของ facebook อ่าน 2233 14 Oct 11 การเชื่อมต่อ facebook และ ล็อกอิน แบบ popup ด้วย php sdk v.3.1.1 อ่าน 2315 03 Dec 10 ทบทวน การขึ้น บรรทัดใหม่ ใน textarea ด้วย Special Characters in HTML อ่าน 2605 16 Oct 08 การแสดงเฉพาะปุ่มสำหรับ upload อ่าน 3576 25 Sep 08 Javascript กับเทคนิค Mouseover และ Mouseout อ่าน 5507 27 Mar 10 ทำให้ เลือก list box แล้วแสดง checkbox ด้วย jQuery อ่าน 5371 26 Oct 08 เช็ค browser ด้วย javascript ได้ทั้ง IE Firefox Opera Chrome อ่าน 5156 08 Jun 09 วิธีการสร้าง preloading images โหลดรูปภาพ ด้วย javascript อย่างง่าย อ่าน 7190 21 Oct 08 php กับการแสดงวันที่เป็นภาษาไทย อ่าน 11586 12 May 10 แนวทาง การดึงข้อมูล แบบ real time ด้วย ajax ใน jQuery อ่าน 10982