fb_ads

www.รับเขียนโปรแกรม.net รับเขียนโปรแกรม ระบบต่างๆ เช่น ระบบข้อมูลบุคคล ระบบข้อมูลลูกค้า ระบบซื้อขาย คลังสินค้า ระบบเช่าจอง ทำงานบน Website ด้วย PHP MySql NodeJs HTML5 JavaScript Ajax

javascript tip เลื่อนตำแหน่งในหน้าเว็บด้วย scrollIntoView


 สำหรับหน้าเว็บที่มีขนาดยาว เพื่อความสะดวกของผู้ใช้ในการแสดงข้อมูล  เราสามารถ ใช้ javascript เพื่อเลื่อนไปยังตำแหน่งต่างๆ ของหน้าเว็บได้โดยใช้ method scrollIntoView ดังนี้


รับเขียนโปรแกรม Web Application



<div id="div1" style='height:400px;' ><!-- สร้าง tag div1 ที่มีความยาว 400px -->
<!-- ปุ่ม  เลื่อน  หน้าเว็บลงไปที่ tag div2-->
<button type="button" onclick="goto_div2()" >Goto Div2</button>
</div>

<div id="div2" style='height:400px;'>
 Div2
</div>

<script>

function goto_div2() //function เลื่อนหน้าเว็บไปที่ tag div2
{
    var elmnt = document.getElementById("div2");//สร้าง object element div2
     elmnt.scrollIntoView();//เลื่อนหน้าเว็บไปที่ tag div2
}

</script>



สามารถดูตัวอย่างได้ที่ https://jsfiddle.net/o8t6zs4y/