ปกติแล้วถ้าเราต้องการจะเลื่อน scrollbar ไปยังทำแหน่งที่เราต้องการภายในหน้าเดียวกันนั้น เราก็จะใช้ anchor ( <a> ) แล้วก็ลิงค์ไปหาตำแหน่งที่เราต้องการ เช่น
<a name="top" /> <p> blah blah blah ...</p> <a href="#top">Go to Top</a>
ซึ่งพอเรากดที่ลิงค์ Go to Top เจ้าตัว scrollbar ก็จะเลื่อนไปยังตำแหน่งของ <a name=”top” /> ทันที แต่ถ้าเราใช้ jQuery เข้ามาช่วยอีกนิด เราจะสามารถใส่ความเร็วในการเคลื่อนที่ของเจ้า scrollbar ได้ทำให้ดูมีลูกเล่นเพิ่มขึ้น วิธีทำก็ไม่อยากครับจากเดิมที่เราใช้แท็ก a เป็นตัวระบุตำแหน่งก็เปลี่ยนเป็นใส่ id ให้กับแท็กที่เราต้องการจะเลื่อนไป แล้วก็ใช้ jQuery ในการควบคุมครับ
<p id="top">blah blah blah ...</p> <a id="go-to-top" href="javascript:return false;">Go to Top</a>
จากนั้นก็เพิ่มโค้ดสำหรับควบคุมความเร็วในการเลื่อนของ scrollbar เข้าไปครับ
$('a#go-to-top').click(funciton(){
$('html,body').animate({scrollTop: $('p#top').offset().top},500);
});
ตัวเลข 500 เป็นการระบุเวลาในการเคลื่อนที่ครับ ถ้าค่าเพิ่มขึ้นก็จะทำให้ scrollbar เคลื่อนที่ช้าลงครับ