UI Pattern UI เลื่อนหน้าขึ้น (Go to Top) By uiblogaziner July 15, 20152681 views ShareTweet 0 หน้าเว็บเพจที่มีเนื้อหาที่ค่อนข้างยาวควรจะมีลิงค์ที่คอยช่วยเลื่อนหน้าขึ้นไปจนถึงด้านบนสุด (Go to Top) เพื่อประหยัดแรงให้แก่ยูสเซอร์ในการที่เลือกเมนูหลักต่อ หรือต้องการคลิกเลือกลิงค์ที่อยู่ด้านบน เราสามารถทำลิงค์เลื่อนหน้าขึ้นได้หลากหลายวิธี มาดูตัวอย่างกันเลย 1. ใช้รูปลูกศรโดยจะปรากฏเมื่อผู้ใช้เลื่อนดูหน้าเกิน 1 หน้าจอ และจะอยู่ในตำแหน่งด้านล่างตลอดขณะเลื่อนหน้าจอ เว็บอีเกียใช้ลูกศรประจำอยู่ด้านล่างเมื่อยูสเซอร์เลื่อนหน้าอ่านข้อมูล 2. ใช้ลูกศรวางไว้ตำแหน่งด้านบน โดยจะปรากฎเมื่อเลื่อนหน้าลง เว็บ New Balance จะแสดงลูกศรเลื่อนหน้าในตำแหน่งตรงกลางหน้าจอทางด้านบน 3. ใช้ลูกศรวางไว้ในตำแหน่งแต่ละส่วนของประเภทสินค้า โดยปรากฏให้เห็นตลอด เว็บ Lazada.co.th ใช้ลูกศรเป็นตัวแทนเหมือนการขึ้นลงบันไดเลื่อน 4. ใช้ลูกศรวางไว้ในตำแหน่งด้านล่างสุดของหน้า โดยปรากฏให้เห็นตลอด เว็บ Longdo Dict จะมีปุ่มเลื่อนหน้าขึ้นบริเวณด้านล่างก่อนถึงส่วน footer 5. ใช้ลิงค์ที่เป็นตัวหนังสือวางไว้ด้านล่างของหน้า เว็บ Greg Brady Project ใช้ลิงค์เลื่อนหน้าเป็นตัวหนังสือ ในตัวอย่างใช้คำว่า ‘Back to Top’ และอีกหลายตัวเลือกคือ Go to Top Top Up โดยถ้าหากต้องเลือกใช้ ขอแนะนำแบบที่ 1 เพราะเป็นรูปแบบที่ใช้กันเยอะในหลายๆ เว็บ แต่ถ้าอยากได้แบบแปลกๆ แบบที่ 2 ก็ดูเข้าตาเหมือนกันนะครับ ^^