เขียนเว็บด้วย AJAX เวลาโหลดข้อมูลใหม่ ควรสั่งให้ Scrollbar วิ่งไปที่บรรทัดแรกด้วย

จุดเล็กๆ ที่ไม่สำคัญแต่ขัดใจกระผมอย่างยิ่งเกี่ยวกับการสร้างเว็บเพจ หรือเว็บไซต์ที่ใช้การโหลดข้อมูลแบบ AJAX ก็คือ "การเปลี่ยนหน้า" หรือโหลดข้อมูลหน้าใหม่

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

บางครั้งผู้ใช้งานกำลังดูข้อมูลอยู่ตรงบรรทัดสุดท้าย ที่ห้างไกลจากบรรทัดแรกเยอะมากๆ

พอคลิกเพื่อไปหน้าใหม่ปุ๊บ ก็จะเจอไม่มีการเหลี่ยนหน้าไปไหน มีแต่ความว่างเปล่า

ที่ไหนได้ ข้อมูลมาเปลี่ยนไปแล้ว แต่ไม่ได้สั่งให้สกอบาร์วิ่งไปด้านบน รู้สึกขัดใจกับหลายๆเว็บแฮะ (รวมทั้งเว็บที่กระผมเองดูแลด้วย)

ลองเอาโค๊ดนี้ ไปปรับใช้ดูเถอะนะ ^____^

http://webdesignerwall.com/tutorials/animated-scroll-to-top

back to top image

ความคิดเห็น

โพสต์ยอดนิยมจากบล็อกนี้

แจกฟรี!! ระบบต่างๆที่พัฒนาด้วย PHP สำหรับนำไปใช้ในงานต่างๆ

สำหรับหลายท่านที่ขอโค้ดเข้ามาทาง Inbox ของเฟซบุ๊กแฟนเพจ หรือถามถึงระบบต่างๆหลังไมค์มานั้น ส่วนใหญ่ก็มีแจกอยู่แล้วในเว็บบอร์ด ThaiCreate.Com นะครับ และด้านล่างนี้ก็เป็นระบบต่างๆที่แจกให้นำไปลองใช้ลองศึกษากันครับ

สร้างแบบฟอร์มล็อกอิน HTML + PHP

ผมจะสร้างระบบตัวอย่างเพื่อแสดงให้เห็นการทำงานของสคริปต์ PHP ที่ใช้ในการล็อกอินอย่างง่ายๆ นะครับ โดยที่ผมจะสร้างโฟลเดอร์ใหม่ขึ้นในไดร์ฟที่เราได้กำหนดให้เป็น Directory Root สำหรับรันสคริปต์ PHP ซึ่งผมกำหนดเอาไว้ที่ D:\www ดังนั้นผมจะสร้างโฟลเดอร์ teacher_assistant ขึ้นมาใหม่จะได้พาธเป็น D:\www\teacher_assistant สำหรับการเข้าถึง จะใช้ URL ดังนี้ http://localhost/teacher_assistant หลังจากสร้างโฟลเดอร์เสร็จเรียบร้อยก็จะเริ่มกระบวนการเตรียมโครงสร้างโปรเจ็กต์ด้วยเครื่องมือช่วยเขียนโปรแกรมชื่อว่า eclipse ซึ่งดูวิธีการสร้างโปรเจ็กต์ได้จากบทความ เริ่มต้นสร้างโปรเจ็กต์ ด้วยโปรแกรม eclipse เครื่องมือเขียนโปรแกรม php ในบทความเป็นการสร้างโปรเจ็กต์ที่มีพาธเป็นโฟลเดอร์ login แต่ในที่นี้ต้องเป็นพาธให้ตรงกับโฟลเดอร์ใหม่ที่เราได้สร้างขึ้นด้วยนะครับ

การดึงข้อมูล MySQL มาแสดงในปฏิทิน Fullcalendar ด้วย PHP

หลักการทำงาน เรียกข้อมูลจากตาราง tb_event ด้วยฟังก์ชั่นของ MySQLi ข้อมูลจากฐานข้อมูลจะถูกวนลูปเก็บไว้ใน $data และจะถูกส่งไปที่ Fullcalendar ด้วยการแปลงข้อมูลจาก PHP ให้อยู่ในรูปแบบ JSON อาร์เรย์ด้วยฟังก์ชั่น json_encode() PHP Code <?php //Database $data = array(); $link = mysqli_connect("127.0.0.1", "tobedev", "1234", "tobedev_example"); mysqli_set_charset($link, 'utf8'); if (!$link) { echo "Error: Unable to connect to MySQL." . PHP_EOL; echo "Debugging errno: " . mysqli_connect_errno() . PHP_EOL; echo "Debugging error: " . mysqli_connect_error() . PHP_EOL; exit; } $query = "SELECT * FROM tb_event"; if ($result = $link->query($query)) { /* fetch object array */ while ($obj = $result->fetch_object()) { $data[] = array( ...

PHP วิถีเริ่มต้นของโปรแกรมเมอร์ รับทำเว็บไซต์

ค้นหาบล็อกนี้