ควบคุม CSS scroll-behavior เพื่อการนำทางที่ราบรื่นและเข้าถึงได้ เรียนรู้เทคนิคการใช้งาน ความเข้ากันได้ของเบราว์เซอร์ และตัวเลือกการปรับแต่งขั้นสูงเพื่อประสบการณ์การใช้งานที่ไร้รอยต่อ
CSS Scroll Behavior: คู่มือฉบับสมบูรณ์เพื่อการเลื่อนที่ราบรื่น
ในภูมิทัศน์การพัฒนาเว็บในปัจจุบัน ประสบการณ์ผู้ใช้ (UX) ครองอำนาจสูงสุด รายละเอียดเล็กๆ น้อยๆ ที่ดูเหมือนเล็กน้อยแต่สามารถส่งผลกระทบอย่างมากต่อ UX คือความราบรื่นของการเลื่อน ไม่มีการกระโดดอย่างกะทันหันระหว่างส่วนต่างๆ อีกต่อไป! คุณสมบัติ scroll-behavior
ของ CSS นำเสนอวิธีที่ง่ายแต่ทรงพลังในการนำการเลื่อนที่ราบรื่นไปใช้ ปรับปรุงการเข้าถึงเว็บไซต์และความพึงพอใจโดยรวมของผู้ใช้ คู่มือนี้ให้การสำรวจที่ครอบคลุมเกี่ยวกับ scroll-behavior
ครอบคลุมทุกอย่างตั้งแต่การใช้งานพื้นฐานไปจนถึงการปรับแต่งขั้นสูงและข้อควรพิจารณาด้านความเข้ากันได้ของเบราว์เซอร์สำหรับผู้ชมทั่วโลกอย่างแท้จริง
CSS Scroll Behavior คืออะไร
คุณสมบัติ scroll-behavior
ใน CSS ช่วยให้คุณระบุลักษณะการเลื่อนสำหรับกล่องเลื่อนได้ โดยค่าเริ่มต้น การเลื่อนเป็นไปในทันที ส่งผลให้เกิดการกระโดดอย่างกะทันหันเมื่อนำทางระหว่างส่วนต่างๆ ของหน้า scroll-behavior: smooth;
จะเปลี่ยนสิ่งนี้ โดยให้การเปลี่ยนภาพแบบภาพเคลื่อนไหวที่ราบรื่นเมื่อมีการทริกเกอร์การเลื่อน ไม่ว่าจะโดยการคลิกลิงก์ Anchor การใช้ปุ่มลูกศร หรือการเริ่มต้นการเลื่อนโดยทางโปรแกรม
การใช้งานพื้นฐานของ scroll-behavior: smooth;
วิธีที่ง่ายที่สุดในการเปิดใช้งานการเลื่อนที่ราบรื่นคือการใช้คุณสมบัติ scroll-behavior: smooth;
กับองค์ประกอบ html
หรือ body
วิธีนี้ทำให้การเลื่อนทั้งหมดภายใน Viewport ราบรื่น
การนำไปใช้กับองค์ประกอบ html
:
โดยทั่วไปนี่เป็นวิธีที่ต้องการเนื่องจากมีผลต่อลักษณะการเลื่อนของทั้งหน้า
html {
scroll-behavior: smooth;
}
การนำไปใช้กับองค์ประกอบ body
:
วิธีนี้ก็ใช้ได้เช่นกัน แต่ไม่ค่อยพบเพราะมีผลเฉพาะเนื้อหาภายใน body
เท่านั้น
body {
scroll-behavior: smooth;
}
ตัวอย่าง: ลองจินตนาการถึงหน้าเว็บง่ายๆ ที่มีหลายส่วนที่ระบุโดยส่วนหัว เมื่อผู้ใช้คลิกที่ลิงก์นำทางที่ชี้ไปยังส่วนใดส่วนหนึ่งเหล่านี้ แทนที่จะกระโดดไปยังส่วนนั้นทันที หน้าจะเลื่อนไปยังส่วนนั้นอย่างราบรื่น
การเลื่อนที่ราบรื่นด้วย Anchor Links
Anchor Links (หรือที่เรียกว่า Fragment Identifiers) เป็นวิธีทั่วไปในการนำทางภายในหน้าเว็บ โดยทั่วไปจะใช้ในสารบัญหรือเว็บไซต์หน้าเดียว ด้วย scroll-behavior: smooth;
การคลิกลิงก์ Anchor จะทริกเกอร์ภาพเคลื่อนไหวการเลื่อนที่ราบรื่น
โครงสร้าง HTML สำหรับ Anchor Links:
Section 1
Content of section 1...
Section 2
Content of section 2...
Section 3
Content of section 3...
ด้วยกฎ CSS html { scroll-behavior: smooth; }
ในตำแหน่ง การคลิกที่ลิงก์ใดๆ ในการนำทางจะส่งผลให้เกิดภาพเคลื่อนไหวการเลื่อนที่ราบรื่นไปยังส่วนที่สอดคล้องกัน
การกำหนดเป้าหมายองค์ประกอบที่เลื่อนได้โดยเฉพาะ
คุณยังสามารถใช้ scroll-behavior: smooth;
กับองค์ประกอบที่เลื่อนได้โดยเฉพาะ เช่น divs ที่มี overflow: auto;
หรือ overflow: scroll;
วิธีนี้ช่วยให้คุณเปิดใช้งานการเลื่อนที่ราบรื่นภายในคอนเทนเนอร์เฉพาะโดยไม่ส่งผลกระทบต่อส่วนอื่นๆ ของหน้า
ตัวอย่าง: การเลื่อนที่ราบรื่นใน Div:
Lots of content here...
More content...
Even more content...
.scrollable-container {
width: 300px;
height: 200px;
overflow: scroll;
scroll-behavior: smooth;
}
ในตัวอย่างนี้ เฉพาะเนื้อหาภายใน .scrollable-container
เท่านั้นที่จะเลื่อนอย่างราบรื่น
การเลื่อนที่ราบรื่นแบบ Programmatic ด้วย JavaScript
ในขณะที่ scroll-behavior: smooth;
จัดการการเลื่อนที่ทริกเกอร์โดยการโต้ตอบของผู้ใช้ (เช่น การคลิกลิงก์ Anchor) คุณอาจต้องเริ่มต้นการเลื่อนโดยทางโปรแกรมโดยใช้ JavaScript เมธอด scrollTo()
และ scrollBy()
เมื่อรวมกับตัวเลือก behavior: 'smooth'
จะเป็นวิธีในการบรรลุเป้าหมายนี้
การใช้ scrollTo()
:
เมธอด scrollTo()
จะเลื่อนหน้าต่างไปยังพิกัดเฉพาะ
window.scrollTo({
top: 500,
left: 0,
behavior: 'smooth'
});
โค้ดนี้จะเลื่อนหน้าต่างอย่างราบรื่นไปยัง Vertical Offset 500 พิกเซลจากด้านบน
การใช้ scrollBy()
:
เมธอด scrollBy()
จะเลื่อนหน้าต่างตามจำนวนที่ระบุ
window.scrollBy({
top: 100,
left: 0,
behavior: 'smooth'
});
โค้ดนี้จะเลื่อนหน้าต่างลงอย่างราบรื่น 100 พิกเซล
ตัวอย่าง: การเลื่อนที่ราบรื่นไปยังองค์ประกอบเมื่อคลิกปุ่ม:
Section 3
Content of section 3...
const scrollButton = document.getElementById('scrollButton');
const section3 = document.getElementById('section3');
scrollButton.addEventListener('click', () => {
section3.scrollIntoView({
behavior: 'smooth'
});
});
เมื่อคลิกปุ่ม หน้าจะเลื่อนไปยังองค์ประกอบ "Section 3" อย่างราบรื่นโดยใช้ scrollIntoView()
เมธอดนี้มักจะถูกเลือกเนื่องจากคำนวณตำแหน่งที่แน่นอนขององค์ประกอบเป้าหมาย โดยไม่คำนึงถึงการเปลี่ยนแปลงเนื้อหาแบบไดนามิก
การปรับแต่งความเร็วในการเลื่อนและ Easing
ในขณะที่ scroll-behavior: smooth;
ให้ภาพเคลื่อนไหวการเลื่อนที่ราบรื่นโดยค่าเริ่มต้น คุณไม่สามารถควบคุมความเร็วหรือ Easing (อัตราการเปลี่ยนแปลงของภาพเคลื่อนไหวเมื่อเวลาผ่านไป) ได้โดยตรงโดยใช้ CSS เพียงอย่างเดียว การปรับแต่งต้องใช้ JavaScript
ข้อควรจำ: ภาพเคลื่อนไหวที่ยาวหรือซับซ้อนเกินไปอาจเป็นอันตรายต่อ UX ซึ่งอาจทำให้เกิดอาการเมารถหรือขัดขวางการโต้ตอบของผู้ใช้ได้ มุ่งมั่นเพื่อภาพเคลื่อนไหวที่ละเอียดอ่อนและมีประสิทธิภาพ
การปรับแต่งตาม JavaScript:
หากต้องการปรับแต่งความเร็วในการเลื่อนและ Easing คุณต้องใช้ JavaScript เพื่อสร้างภาพเคลื่อนไหวแบบกำหนดเอง โดยทั่วไปแล้วจะเกี่ยวข้องกับการใช้ไลบรารีเช่น GSAP (GreenSock Animation Platform) หรือการใช้ตรรกะภาพเคลื่อนไหวของคุณเองโดยใช้ requestAnimationFrame
ตัวอย่างการใช้ requestAnimationFrame
:
function smoothScroll(target, duration) {
const start = window.pageYOffset;
const targetPosition = target.getBoundingClientRect().top;
const startTime = performance.now();
function animation(currentTime) {
const timeElapsed = currentTime - startTime;
const run = ease(timeElapsed, start, targetPosition, duration);
window.scrollTo(0, run);
if (timeElapsed < duration) {
requestAnimationFrame(animation);
}
}
// Easing function (e.g., easeInOutQuad)
function ease(t, b, c, d) {
t /= d/2;
if (t < 1) return c/2*t*t + b;
t--;
return -c/2 * (t*(t-2) - 1) + b;
}
requestAnimationFrame(animation);
}
// Example usage:
const targetElement = document.getElementById('section3');
const scrollDuration = 1000; // milliseconds
smoothScroll(targetElement, scrollDuration);
โค้ดนี้กำหนดฟังก์ชัน smoothScroll
ที่ใช้องค์ประกอบเป้าหมายและระยะเวลาเป็นอินพุต ใช้ requestAnimationFrame
เพื่อสร้างภาพเคลื่อนไหวที่ราบรื่นและมีฟังก์ชัน Easing (easeInOutQuad
ในตัวอย่างนี้) เพื่อควบคุมจังหวะของภาพเคลื่อนไหว คุณสามารถค้นหาฟังก์ชัน Easing ที่แตกต่างกันมากมายทางออนไลน์เพื่อให้ได้เอฟเฟกต์ภาพเคลื่อนไหวที่หลากหลาย
ข้อควรพิจารณาด้านการเข้าถึง
แม้ว่าการเลื่อนที่ราบรื่นจะช่วยปรับปรุง UX ได้ แต่สิ่งสำคัญคือต้องพิจารณาถึงการเข้าถึง ผู้ใช้บางรายอาจพบว่าการเลื่อนที่ราบรื่นรบกวนสมาธิหรือทำให้สับสน การให้วิธีปิดใช้งานการเลื่อนที่ราบรื่นเป็นสิ่งสำคัญสำหรับความครอบคลุม
การใช้ค่ากำหนดของผู้ใช้:
แนวทางที่ดีที่สุดคือการเคารพค่ากำหนดของระบบปฏิบัติการของผู้ใช้สำหรับการลดการเคลื่อนไหว Media Queries เช่น prefers-reduced-motion
ช่วยให้คุณตรวจจับได้ว่าผู้ใช้ได้ร้องขอการลดการเคลื่อนไหวในการตั้งค่าระบบหรือไม่
การใช้ prefers-reduced-motion
:
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto !important; /* Override smooth scrolling */
}
}
โค้ดนี้จะปิดใช้งานการเลื่อนที่ราบรื่นหากผู้ใช้เปิดใช้งานการตั้งค่า "Reduce Motion" ในระบบปฏิบัติการ !important
Flag ใช้เพื่อให้แน่ใจว่ากฎนี้จะแทนที่การประกาศ scroll-behavior
อื่นๆ
การให้ Toggle แบบแมนนวล:
คุณยังสามารถให้ Toggle แบบแมนนวล (เช่น ช่องทำเครื่องหมาย) ที่ช่วยให้ผู้ใช้เปิดหรือปิดใช้งานการเลื่อนที่ราบรื่นได้ วิธีนี้ช่วยให้ผู้ใช้ควบคุมประสบการณ์ของตนได้โดยตรงมากขึ้น
const smoothScrollToggle = document.getElementById('smoothScrollToggle');
smoothScrollToggle.addEventListener('change', () => {
if (smoothScrollToggle.checked) {
document.documentElement.style.scrollBehavior = 'smooth';
} else {
document.documentElement.style.scrollBehavior = 'auto';
}
});
โค้ดนี้เพิ่มช่องทำเครื่องหมายที่ช่วยให้ผู้ใช้ Toggle การเลื่อนที่ราบรื่นเปิดหรือปิดได้ อย่าลืมเก็บค่ากำหนดของผู้ใช้ (เช่น การใช้ Local Storage) เพื่อให้จดจำได้ในระหว่างเซสชัน
ความเข้ากันได้ของเบราว์เซอร์
scroll-behavior
มีการรองรับเบราว์เซอร์ที่ดี แต่สิ่งสำคัญคือต้องตระหนักถึงเบราว์เซอร์รุ่นเก่าที่ไม่รองรับ นี่คือสรุปความเข้ากันได้ของเบราว์เซอร์:
- Chrome: รองรับตั้งแต่เวอร์ชัน 61
- Firefox: รองรับตั้งแต่เวอร์ชัน 36
- Safari: รองรับตั้งแต่เวอร์ชัน 14.1 (รองรับบางส่วนในเวอร์ชันก่อนหน้า)
- Edge: รองรับตั้งแต่เวอร์ชัน 79
- Opera: รองรับตั้งแต่เวอร์ชัน 48
- Internet Explorer: ไม่รองรับ
การให้ Fallback สำหรับเบราว์เซอร์รุ่นเก่า:
สำหรับเบราว์เซอร์ที่ไม่รองรับ scroll-behavior
คุณสามารถใช้ JavaScript Polyfill ได้ Polyfill คือโค้ดชิ้นหนึ่งที่ให้ฟังก์ชันการทำงานของคุณสมบัติใหม่กว่าในเบราว์เซอร์รุ่นเก่า
ตัวอย่าง: การใช้ Polyfill:
มีไลบรารี JavaScript หลายตัวที่ให้ Smooth Scrolling Polyfills ตัวเลือกหนึ่งคือการใช้ไลบรารีเช่น "Smoothscroll-polyfill"
โค้ดนี้รวมถึงไลบรารี "Smoothscroll-polyfill" และเริ่มต้น ฟังก์ชันนี้จะให้ฟังก์ชัน Smooth Scrolling ในเบราว์เซอร์รุ่นเก่าที่ไม่รองรับ scroll-behavior
โดยกำเนิด
การโหลดแบบมีเงื่อนไข: พิจารณาการโหลด Polyfill แบบมีเงื่อนไขโดยใช้ Script Loader หรือ Feature Detection เพื่อหลีกเลี่ยงค่าใช้จ่ายที่ไม่จำเป็นในเบราว์เซอร์สมัยใหม่
แนวทางปฏิบัติที่ดีที่สุดสำหรับการเลื่อนที่ราบรื่น
นี่คือแนวทางปฏิบัติที่ดีที่สุดบางประการที่ควรคำนึงถึงเมื่อใช้ Smooth Scrolling:
- ทำให้ละเอียดอ่อน: หลีกเลี่ยงภาพเคลื่อนไหวที่ยาวหรือซับซ้อนเกินไปที่อาจรบกวนสมาธิหรือทำให้เกิดอาการเมารถ
- พิจารณาการเข้าถึง: ให้วิธีสำหรับผู้ใช้ในการปิดใช้งานการเลื่อนที่ราบรื่นหากพบว่าทำให้สับสน เคารพค่ากำหนดของผู้ใช้สำหรับการลดการเคลื่อนไหว
- ทดสอบบนอุปกรณ์ต่างๆ: ตรวจสอบให้แน่ใจว่า Smooth Scrolling ทำงานได้ดีบนอุปกรณ์และขนาดหน้าจอต่างๆ
- เพิ่มประสิทธิภาพ: หลีกเลี่ยงการทริกเกอร์ภาพเคลื่อนไหว Smooth Scrolling มากเกินไป เนื่องจากอาจส่งผลต่อประสิทธิภาพได้
- ใช้ Anchor Links ที่มีความหมาย: ตรวจสอบให้แน่ใจว่า Anchor Links ชี้ไปยังส่วนที่กำหนดไว้อย่างชัดเจนบนหน้า
- หลีกเลี่ยงเนื้อหาที่ทับซ้อนกัน: ระลึกถึงส่วนหัวคงที่หรือองค์ประกอบอื่นๆ ที่อาจทับซ้อนเป้าหมายของการเลื่อน ใช้คุณสมบัติ CSS เช่น
scroll-padding-top
หรือ JavaScript เพื่อปรับตำแหน่งการเลื่อนตามนั้น
ปัญหาทั่วไปและวิธีแก้ไข
นี่คือปัญหาทั่วไปบางประการที่คุณอาจพบเมื่อใช้ Smooth Scrolling และวิธีแก้ไข:
- ปัญหา: Smooth Scrolling ไม่ทำงาน
- วิธีแก้ไข: ตรวจสอบอีกครั้งว่า
scroll-behavior: smooth;
ถูกนำไปใช้กับองค์ประกอบhtml
หรือbody
ตรวจสอบให้แน่ใจว่า Anchor Links ชี้ไปยังส่วนที่สอดคล้องกันอย่างถูกต้อง ตรวจสอบว่าไม่มีกฎ CSS ที่ขัดแย้งกันซึ่งแทนที่คุณสมบัติscroll-behavior
- วิธีแก้ไข: ตรวจสอบอีกครั้งว่า
- ปัญหา: Smooth Scrolling ช้าหรือเร็วจนเกินไป
- วิธีแก้ไข: ปรับแต่งความเร็วในการเลื่อนโดยใช้ JavaScript ตามที่อธิบายไว้ในส่วน "การปรับแต่งความเร็วในการเลื่อนและ Easing" ทดลองกับฟังก์ชัน Easing ที่แตกต่างกันเพื่อค้นหาความสมดุลที่เหมาะสมระหว่างความราบรื่นและการตอบสนอง
- ปัญหา: ส่วนหัวคงที่ทับซ้อนเป้าหมายของการเลื่อน
- วิธีแก้ไข: ใช้คุณสมบัติ
scroll-padding-top
ใน CSS เพื่อเพิ่ม Padding ที่ด้านบนของคอนเทนเนอร์การเลื่อน อีกทางเลือกหนึ่งคือ ใช้ JavaScript เพื่อคำนวณความสูงของส่วนหัวคงที่และปรับตำแหน่งการเลื่อนตามนั้น
- วิธีแก้ไข: ใช้คุณสมบัติ
- ปัญหา: Smooth Scrolling รบกวนการทำงานของ JavaScript อื่นๆ
- วิธีแก้ไข: ตรวจสอบให้แน่ใจว่าโค้ด JavaScript ของคุณไม่ได้ขัดแย้งกับภาพเคลื่อนไหว Smooth Scrolling ใช้ Event Listener และ Callback เพื่อประสานการดำเนินการของฟังก์ชัน JavaScript ที่แตกต่างกัน
เทคนิคและข้อควรพิจารณาขั้นสูง
นอกเหนือจากพื้นฐานแล้ว ยังมีเทคนิคและข้อควรพิจารณาขั้นสูงหลายประการเพื่อปรับปรุงการใช้งาน Smooth Scrolling ของคุณ
การใช้ scroll-margin
และ scroll-padding
:
คุณสมบัติ CSS เหล่านี้ให้การควบคุมที่ละเอียดยิ่งขึ้นเกี่ยวกับลักษณะการ Snap การเลื่อนและช่วยหลีกเลี่ยงไม่ให้เนื้อหาถูกบดบังโดยส่วนหัวหรือส่วนท้ายคงที่
scroll-margin
: กำหนด Margin รอบพื้นที่ Scroll Snapscroll-padding
: กำหนด Padding รอบพื้นที่ Scroll Snap
ตัวอย่าง:
section {
scroll-margin-top: 20px; /* Adds a 20px margin above each section when scrolling */
}
html {
scroll-padding-top: 60px; /* Adds 60px padding at the top of the viewport when scrolling */
}
การรวมกับ Intersection Observer API:
Intersection Observer API ช่วยให้คุณตรวจจับได้ว่าองค์ประกอบใดเข้าหรือออกจาก Viewport คุณสามารถใช้ API นี้เพื่อทริกเกอร์ภาพเคลื่อนไหว Smooth Scrolling ตามการมองเห็นขององค์ประกอบ
ตัวอย่าง:
const sections = document.querySelectorAll('section');
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Do something when the section is in view
console.log('Section ' + entry.target.id + ' is in view');
} else {
// Do something when the section is out of view
console.log('Section ' + entry.target.id + ' is out of view');
}
});
}, {
threshold: 0.5 // Trigger when 50% of the element is visible
});
sections.forEach(section => {
observer.observe(section);
});
โค้ดนี้ใช้ Intersection Observer API เพื่อตรวจจับว่าแต่ละส่วนเข้าหรือออกจาก Viewport จากนั้นคุณสามารถใช้ข้อมูลนี้เพื่อทริกเกอร์ภาพเคลื่อนไหว Smooth Scrolling แบบกำหนดเองหรือเอฟเฟกต์ภาพอื่นๆ
มุมมองระดับโลกเกี่ยวกับ Scroll Behavior
ในขณะที่การใช้งานทางเทคนิคของ Smooth Scrolling ยังคงสอดคล้องกันทั่วโลก ข้อควรพิจารณาด้านวัฒนธรรมและบริบทสามารถมีอิทธิพลต่อการใช้งานที่รับรู้ได้
- ความเร็วอินเทอร์เน็ต: ในภูมิภาคที่มีการเชื่อมต่ออินเทอร์เน็ตที่ช้ากว่า ไลบรารี JavaScript ขนาดใหญ่สำหรับภาพเคลื่อนไหวแบบกำหนดเองอาจส่งผลเสียต่อเวลาในการโหลดและ UX จัดลำดับความสำคัญของโซลูชันที่มีน้ำหนักเบาและการโหลดแบบมีเงื่อนไข
- ความสามารถของอุปกรณ์: เพิ่มประสิทธิภาพสำหรับอุปกรณ์ที่หลากหลาย ตั้งแต่เดสก์ท็อประดับไฮเอนด์ไปจนถึงโทรศัพท์มือถือพลังงานต่ำ ทดสอบอย่างละเอียดบนอุปกรณ์และขนาดหน้าจอต่างๆ
- มาตรฐานการเข้าถึง: ปฏิบัติตามมาตรฐานการเข้าถึงสากลเช่น WCAG (Web Content Accessibility Guidelines) เพื่อให้แน่ใจว่าผู้ใช้ที่มีความพิการสามารถเข้าถึงได้
- ความคาดหวังของผู้ใช้: ในขณะที่ Smooth Scrolling ได้รับการตอบรับอย่างดีโดยทั่วไป โปรดระลึกถึงความแตกต่างทางวัฒนธรรมที่อาจเกิดขึ้นในความคาดหวังของผู้ใช้เกี่ยวกับภาพเคลื่อนไหวและการเคลื่อนไหว ทดสอบกับกลุ่มผู้ใช้ที่หลากหลายเพื่อรวบรวมข้อเสนอแนะ
บทสรุป
scroll-behavior: smooth;
เป็นคุณสมบัติ CSS ที่มีค่าซึ่งสามารถปรับปรุงประสบการณ์ผู้ใช้ของเว็บไซต์ของคุณได้อย่างมาก การทำความเข้าใจการใช้งานพื้นฐาน ตัวเลือกการปรับแต่ง ข้อควรพิจารณาด้านการเข้าถึง และความเข้ากันได้ของเบราว์เซอร์ คุณสามารถสร้างประสบการณ์การเรียกดูที่ราบรื่นและสนุกสนานสำหรับผู้ใช้ทั่วโลก อย่าลืมจัดลำดับความสำคัญของการเข้าถึง เพิ่มประสิทธิภาพ และทดสอบอย่างละเอียดเพื่อให้แน่ใจว่าการใช้งาน Smooth Scrolling ของคุณตรงกับความต้องการของผู้ใช้ทั้งหมดของคุณ การทำตามแนวทางและแนวทางปฏิบัติที่ดีที่สุดที่ระบุไว้ในคู่มือนี้ คุณสามารถควบคุม Smooth Scrolling และสร้างเว็บไซต์ที่ทั้งสวยงามและเป็นมิตรกับผู้ใช้สำหรับผู้ชมทั่วโลก