การทำเว็บแบบ Single Page เบื้องต้น ด้วย Jquery (javascript)

บทความสอนการทำเมนูสำหรับเว็บ Single Page  หรือ One Page เมื่อกดที่เมนูแล้ว animation ไปตามเนื้อหาที่เรากำหนด เว็บแบบนี้เหมาะสำหรับทำเป็นเว็บส่วนบุคคล แสดงผลงานหรือประวัติส่วนบุคคลหรือเว็บที่มีข้อมูลไม่มาก

เริ่มจากตัวอย่างกันครับ

จากตัวอย่างจะประกอบไปด้วยกัน 3 ส่วน

1  ตัวเมนูจะเป็น HTML (ส่วน CSS ผมไม่ขอพูดถึงนะครับ สามารถ Download Source เต็มไปลองเล่นดูครับ)

<div id="menu">    // ใส่ ID ชื่อ menu เพิ่อ link กับ javascript และ css
     
           <a href="#home">HOME</a>   // attribute href เป็นส่วนที่บอก ID ของเนื้อหาที่ต้องการไป เช่น #home คือให้ไปใน element id home
           <a href="#about">ABOUT US</a>
           <a href="#product">PRODUCT</a>
           <a href="#service">SERVICE</a>
           <a href="#contact">CONTACT</a>
          
     </div>

2 ในส่วนของเนื้อหาที่จะใช้กับเมนูด้านบน

     <div id="home" class="section" style="background:red;">  // เราจะใส่ id สำหรับเนื้องหาเพื่ออ้างอีงกับเมนู เช่น อันนี้ ใส่ id = home 
      <div style="padding-top:250px;font-size:3em;">HOME</div> 
     </div>
     <div id="about" class="section" style="background:blue;"> 
      <div style="padding-top:250px;font-size:3em;">ABOUT</div>  
     </div>
     <div id="product" class="section" style="background:green;"> 
      <div style="padding-top:250px;font-size:3em;">PRODUCT</div>  
     </div>
     <div id="service" class="section" style="background:gray;">
      <div style="padding-top:250px;font-size:3em;">SERVICES</div>  
     </div>
     <div id="contact" class="section" style="background:black;"> 
      <div style="padding-top:250px;font-size:3em;">CONTACT</div>  
</div>
     

3 ส่วนนี้เป็น Jquery ที่ใช้ในการใส่ EVENT ให้กับเมนูตอน Click

$(document).ready(function() {
  
  
               
    $("#menu a").click(function(event){  // จับ Event เมื่อมีการ Click tag a ใน id menu
		
      
			var full_url = this.href;  // ดึง attribute href เช่น #home 
			var parts = full_url.split("#"); // หลังจากนั้นนำมาตัดออก 
			var target_offset = $("#"+parts[1]).offset(); // นำมาหาค่าความสูงของ Element เนื้อหา จากบนสุดถึงเนื้อหา
                        var target_top = (target_offset.top);  // นำค้าไปเป็นไว้ในตัว แปร
                        $('html, body').animate({scrollTop:target_top}, 1200);  // ใช้ jquery animation ลงไปยังนำแหน่ง
                        return false; 
		
    
      });
  
   
   
  
  
   });

จริงๆแล้วจะมี JavaScript  library  มากมายสำหรับการทำ Single Page Web แต่บางครั้งอาจไม่ตรงกับความต้องการทั้งหมดหรือมากเกินไป

แต่ถ้าเข้าใจหลักการเบื้องต้นน่าจะทำให้เราสามารถปรับแต่โค้ดจาก library ที่มีอยู่หรือเขียนขึ้นมาเองได้

SOURCE CODE