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/