สร้างปุ่มเลื่อนขึ้นบน page scroll
$(document).ready(function(){ $('a[href=#]').click(function(e){ // เลือก a ที่มี href=# $.scrollTo(0,'slow'); e.preventDefault();//code หลังจากนี้จะไม่ทำงานเอาไว้หยุดคำสั่งอื่นของโค้ดในหน้านัน้ }); });
เปิดปิด Toggle
$(document).ready(function(){ $('#bio > div').hide();//div ที่อยู่ ใน bio จะ hide เครื่องหมาย > หมายถึงตัวลูกทุกตัว $('#bio > div:first').show();//show อันแรก ถ้าต้องการตัวที่สองของ div ให้ใส่เป็น div:eq(1)ไปแทน div:first $('#bio h3').click(function(){ $(this).next().animate( {'height:':'toggle'},'slow','easeOutBounce' ); }); });
navigation floating scroll
jquery $(document).ready(function(){ $(window).scroll(function(){ $('#navigation').css('top',$(document).scrollTop());//สั่งใน css ให้เลื่อนตาม }); }); หรือใช้แบบนี้ก็ได้ #navigation { position: relative; } #content { height: 2000px; } #navigation.fixed { position: fixed; left: 50%; margin-left: 160px; top: 0; }…
easing toggle แบบสมูธ
$(document).ready(function(){ $('p:first').toggle(function(){ $(this).animate({'height':'+=150px'},2000,'linear') },function(){ $(this).animate({'height':'-=150px'},2000,'swing'); }); });