วิธีเพิ่มลิงก์การนำทางหน้า Sticky (ถัดไป, ก่อนหน้า, ก่อน, สุดท้าย) ไปยัง Divi Sections

บางครั้งการนำทางเนื้อหาของหน้าจะสะดวกกว่าด้วยการคลิกปุ่มแทนที่จะเลื่อน นี่เป็นเรื่องจริงโดยเฉพาะอย่างยิ่งสำหรับเพจเจอร์เดียวหรือถ้าคุณมีบางส่วนที่ต่อเนื่องกันบนหน้าที่รับประกันการเข้าถึงที่ดีที่สุดสำหรับผู้ใช้ การเพิ่มลิงก์การนำทางของหน้าที่ติดหนึบที่ด้านล่างของส่วนต่างๆ อาจเป็นทางเลือกที่ไม่ซ้ำใครในการให้ผู้ใช้เลื่อนดูอย่างต่อเนื่องหรือรวมลิงก์สมอในเมนูส่วนหัวหลักของคุณ

ในบทช่วยสอนนี้ เราจะแสดงวิธีเพิ่มลิงก์การนำทางหน้าแบบติดหนึบ (ถัดไป ก่อนหน้า ก่อนหน้า และสุดท้าย) ให้กับหน้าใน Divi ซึ่งจะทำให้คุณสามารถนำทางไปยังส่วนต่างๆ ทั่วทั้งหน้าได้อย่างง่ายดาย

มาเริ่มกันเลย!

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

สังเกตว่าลิงก์การนำทางที่ติดหนึบเปลี่ยนแปลงอย่างไรเมื่อเลื่อนลงมาที่หน้า

สังเกตว่าการนำทางไปยังแต่ละส่วนนั้นง่ายเพียงใดโดยคลิกลิงก์การนำทาง

และนี่คือรูปลักษณ์ของการออกแบบบนมือถือ

และนี่คือ codepen ที่แสดงให้เห็นถึงการทำงานหลัก

ดาวน์โหลดเค้าโครงฟรี

หากต้องการใช้การออกแบบจากบทช่วยสอนนี้ คุณจะต้องดาวน์โหลดโดยใช้ปุ่มด้านล่างก่อน ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

เข้าร่วมจดหมายข่าว Divi แล้วเราจะส่งอีเมลสำเนาชุดเค้าโครงหน้า Landing Page ของ Divi ที่ดีที่สุดให้คุณ พร้อมแหล่งข้อมูล เคล็ดลับ และลูกเล่นที่น่าตื่นตาตื่นใจและฟรีอีกมากมายของ Divi ทำตามแล้วคุณจะเป็นผู้เชี่ยวชาญ Divi ในเวลาไม่นาน หากคุณสมัครรับข้อมูลแล้ว เพียงพิมพ์ที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลดเพื่อเข้าถึงชุดเค้าโครง

ดาวน์โหลด

คุณสมัครสำเร็จแล้ว โปรดตรวจสอบที่อยู่อีเมลของคุณเพื่อยืนยันการสมัครของคุณและเข้าถึงชุดเค้าโครง Divi รายสัปดาห์ฟรี!

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ

จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

ไปกวดวิชากันเถอะ

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

การเพิ่มลิงค์นำทางไปยังส่วน Divi

การสร้างส่วนบนสุด

โดยค่าเริ่มต้น จะมีส่วนปกติที่พร้อมใช้งานใน Divi Builder ใช้ส่วนปกติที่เป็นค่าเริ่มต้น เปิดการตั้งค่าส่วนและนำช่องว่างภายในด้านล่างออกดังนี้:

• ช่องว่างภายใน: 0px ด้านล่าง

การตั้งค่าแถว

เพิ่มแถวหนึ่งคอลัมน์ในส่วน

จากนั้นอัปเดตการตั้งค่าการออกแบบสำหรับแถวดังนี้:

• ความกว้าง: 100%
• ความกว้างสูงสุด: 80vw (เดสก์ท็อป, แท็บเล็ต), 95vw (โทรศัพท์)

ชื่อหมวด

ในการสร้างชื่อส่วน ขั้นแรก ให้เพิ่มโมดูลข้อความใหม่ในแถว/คอลัมน์

จากนั้นอัปเดตข้อความเนื้อหาด้วยชื่อ H2 ต่อไปนี้:

<h2>Top</h2>

ภายใต้แท็บการออกแบบ ให้อัปเดตการตั้งค่าข้อความสำหรับส่วนหัว H2 ดังนี้:

• เลือกแท็บ H2
• หัวข้อ 2 แบบอักษร: มอนต์เซอร์รัต
• หัวข้อ 2 น้ำหนักแบบอักษร: หนัก
• ส่วนหัว 2 รูปแบบตัวอักษร: TT
• การจัดตำแหน่งข้อความหัวเรื่อง 2: center
• หัวเรื่อง 2 ขนาดข้อความ: 8vw (เดสก์ท็อป, แท็บเล็ต), 61.36px (โทรศัพท์)

การสร้างมาตรา 1

ต่อไป เราจะสร้างส่วนแรกของเราที่จะมีลิงก์การนำทางที่ติดหนึบ ในการสร้างส่วนที่ 1 ให้ทำซ้ำส่วนบนสุดและติดป้ายกำกับส่วนที่ซ้ำกันในมุมมองเลเยอร์

ส่วนที่ 1 สีพื้นหลัง

เปิดการตั้งค่าสำหรับส่วนที่ 1 และอัปเดตสีพื้นหลัง:

• สีพื้นหลัง: #fec0f4

ส่วนที่ 1 CSS ID สำหรับการนำทาง Anchor Link

ในการลิงก์ไปยังส่วนนี้โดยใช้ลิงก์ Anchor เราจำเป็นต้องเพิ่ม CSS ID ภายใต้แท็บขั้นสูง เพิ่มรหัส CSS ต่อไปนี้:

• CSS ID: one

อัพเดทชื่อเรื่อง

จากนั้นอัปเดตข้อความชื่อในโมดูลข้อความเป็น "ส่วนที่ 1"

การสร้าง Sticky Row สำหรับส่วนที่ 1

เมื่ออัปเดตส่วนและชื่อเรื่องแล้ว เราจะสร้างแถวที่ติดหนึบซึ่งจะเก็บลิงก์การนำทางของเราไว้ในที่สุด ในการดำเนินการนี้ ให้เพิ่มแถวคอลัมน์ใหม่ภายใต้แถวที่มีอยู่ในส่วนที่ 1

เนื่องจากส่วนของเราไม่มีช่องว่างภายใน แถวจึงควรอยู่ด้านล่างสุดของส่วนอย่างสวยงาม

การตั้งค่า Sticky Row

ในการทำให้แถวติดหนึบ เราต้องอัปเดตการตั้งค่าแถว

ตัวเลือกเหนียว

ภายใต้แท็บขั้นสูง ให้อัปเดตตัวเลือกตำแหน่งติดหนึบดังนี้:

• ตำแหน่งติดหนึบ: ติดที่ด้านล่าง
• ขีด จำกัด ติดหนึบสูงสุด: Section
• ออฟเซ็ตจากองค์ประกอบติดหนึบรอบข้าง: NO

เพื่อให้แน่ใจว่ามีแถวติดหนึบอยู่ในส่วน

การตั้งค่าการออกแบบ

ภายใต้แท็บการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 25vw (เดสก์ท็อป, แท็บเล็ต), โทรศัพท์ 50%
• การจัดแนวแถว: ขวา (เดสก์ท็อป, แท็บเล็ต), ซ้าย (โทรศัพท์)
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

ในการซ่อนแถว (พร้อมกับปุ่มที่บรรจุอยู่) เราจะย้ายแถวที่อยู่ด้านหลังส่วนด้านล่างโดยใช้การตั้งค่าการแปลการแปลง จากนั้นเราจะย้ายแถวขึ้นไปในมุมมองเมื่ออยู่ในสถานะติดหนึบ เพื่อให้แน่ใจว่าปุ่มต่างๆ จะมองเห็นได้เฉพาะเมื่ออยู่ในสถานะติดหนึบ

ในการดำเนินการนี้ ให้คลิกไอคอนปักหมุด (ภาพขนาดย่อ) เมื่อวางเมาส์เหนือชื่อตัวเลือกการแปลงเพื่อเปิดใช้งานแท็บปักหมุด จากนั้นอัปเดตตัวเลือกการแปลงดังนี้:

• แปลงแกน Y แปล (เดสก์ท็อป): 100%
• แปลงแกน Y แปล (เหนียว): 0%

ตำแหน่งออฟเซ็ต

ในที่สุด เราจะมีแถวแท่งอีกแถวสำหรับปุ่มแรกและปุ่มสุดท้ายที่จะติดอยู่ที่ด้านล่างขวาของหน้าต่าง เราจึงต้องย้ายแท่งไม้นี้ไปทางซ้าย

หากต้องการย้ายแถวติดหนึบ ไปที่แท็บขั้นสูงและอัปเดตตัวเลือกออฟเซ็ตตำแหน่งดังนี้:

• แหล่งกำเนิดออฟเซ็ต: บนขวา
• ออฟเซ็ตแนวนอน: 25vw (เดสก์ท็อป, แท็บเล็ต), 0px (โทรศัพท์)

หมายเหตุ: ออฟเซ็ตบนโทรศัพท์ถูกตั้งค่าเป็น 0px เนื่องจากการจัดตำแหน่งแถวจะถูกตั้งค่าไปทางซ้าย และความกว้างจะเป็น 50%

คอลัมน์ Sticky Row CSS

เพื่อให้แน่ใจว่าปุ่มของเราอยู่ติดกันอย่างสมบูรณ์และจัดแนวในแนวตั้ง เราจะเพิ่มข้อมูลโค้ด CSS แบบกำหนดเองขนาดเล็กเพื่อใส่ปุ่มในเค้าโครงกริด CSS

ภายใต้แท็บขั้นสูง เพิ่ม CSS ต่อไปนี้ในองค์ประกอบหลัก:

display:grid;
grid-template-columns:50% 50%;

การเพิ่มตัวแบ่งและปุ่มถัดไปให้กับ Sticky Row (ส่วนที่ 1)

ตอนนี้ได้เวลาเริ่มเพิ่มปุ่มของเราลงในคอลัมน์แล้ว สำหรับส่วนแรกนี้ เราต้องการปุ่มถัดไปเท่านั้น ดังนั้น เราจำเป็นต้องมีตัวแบ่งเพื่อทำหน้าที่เป็นตัวยึดตำแหน่งสำหรับปุ่มซ้าย

ตัวแบ่ง

เพิ่มตัวแบ่งใหม่ให้กับคอลัมน์

จากนั้นตั้งค่าตัวเลือก Show Divider เป็น “NO”

ปุ่มถัดไป

ใต้โมดูลตัวแบ่ง ให้เพิ่มโมดูลปุ่ม

จากนั้นอัปเดตการตั้งค่าเนื้อหาปุ่ม:

• ข้อความปุ่ม: ถัดไป
• URL ลิงก์ของปุ่ม: #two

URL “#two” จะข้ามไปยังส่วนถัดไปที่เราจะสร้างด้วย CSS ID “สอง”

ภายใต้แท็บการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

• การจัดตำแหน่งปุ่ม: ศูนย์
• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 2.1vw (เดสก์ท็อป, แท็บเล็ต), 16.1px (โทรศัพท์)
• สีข้อความของปุ่ม: #000000
• พื้นหลังปุ่ม: #eeeeee
• ความกว้างของขอบปุ่ม: 0px
• ไอคอนปุ่ม: ลูกศรลง (ดูภาพหน้าจอ)
• แสดงเฉพาะไอคอนเมื่อวางเมาส์เหนือปุ่ม: NO

• มาร์จิ้น: 2% ถูกต้อง

เพื่อให้แน่ใจว่าปุ่มจะขยายเต็มความกว้างของคอลัมน์กริด CSS ให้เพิ่ม CSS ที่กำหนดเองต่อไปนี้ในองค์ประกอบหลัก:

display:block !important; width: 100%;

การสร้างส่วนที่2

ตอนนี้เราเสร็จสิ้นส่วนที่ 1 แล้ว ให้ทำซ้ำส่วนที่ 1 เพื่อสร้างส่วนที่ 2 และอัปเดตป้ายกำกับในเลเยอร์ตามลำดับ

อัปเดตส่วนที่ 2 สีพื้นหลังและข้อความชื่อ

ถัดไป อัปเดตสีพื้นหลังของส่วน:

• สีพื้นหลัง: #8dc6c1

จากนั้นอัปเดตข้อความชื่อเป็น "ส่วนที่ 2" ในโมดูลข้อความของแถวบนสุด

อัปเดตรหัส CSS ส่วนที่ 2

ภายใต้แท็บขั้นสูง ให้อัปเดตส่วนด้วยรหัส CSS ใหม่:

• CSS ID: two

เพิ่มปุ่มถัดไปและก่อนหน้าใน Sticky Row (ส่วนที่ 2)

ภายในแถวติดหนึบของส่วนที่ 2 ให้ลบโมดูลตัวแบ่งและทำซ้ำปุ่มถัดไปเพื่อให้คุณมีปุ่มสองปุ่ม

อัปเดต URL ลิงก์ปุ่มถัดไป

เปิดการตั้งค่าสำหรับปุ่มแรก/ซ้าย ถัดไป และอัปเดตลิงก์ของปุ่มดังนี้:

• URL ลิงก์ของปุ่ม: #three

URL “#three” จะข้ามไปยังส่วนถัดไปที่เราจะสร้างด้วย CSS ID “สาม”

เพิ่มข้อความปุ่มก่อนหน้าและ URL ของลิงก์

ในการสร้างปุ่มก่อนหน้า ให้เปิดการตั้งค่าสำหรับปุ่มที่สอง/ขวาและอัปเดตสิ่งต่อไปนี้:

• ข้อความปุ่ม: ก่อนหน้า
• URL ลิงก์ของปุ่ม: #one

URL “#one” จะข้ามกลับไปที่ส่วนที่มีรหัส CSS “หนึ่ง”

เพิ่มไอคอนปุ่มก่อนหน้า

จากนั้นอัปเดตไอคอน:

• ไอคอนปุ่ม: ลูกศรขึ้น (ดูภาพหน้าจอ)

การสร้างส่วนที่3

ตอนนี้เราได้ทำส่วนที่ 2 เสร็จแล้ว ให้ทำซ้ำส่วนที่ 2 เพื่อสร้างส่วนที่ 3 และอัปเดตป้ายกำกับในเลเยอร์ตามลำดับ

อัปเดตส่วนที่ 3 สีพื้นหลังและข้อความชื่อ

เพิ่มสีพื้นหลังใหม่ในส่วน:

• สีพื้นหลัง: #9fa5f4

จากนั้นอัปเดตข้อความชื่อเป็น "ส่วนที่ 3" ในโมดูลข้อความของแถวบนสุด

อัปเดตรหัส CSS ส่วนที่ 3

ภายใต้แท็บขั้นสูง ให้อัปเดตส่วนด้วยรหัส CSS ใหม่:

• CSS ID: สาม

เพิ่มตัวแบ่งและปุ่มก่อนหน้าไปยัง Sticky Row (ส่วนที่ 3)

เพิ่มตัวแบ่งและลบปุ่มถัดไป

เราสามารถดำเนินการต่อและสร้างส่วนต่างๆ ได้มากเท่าที่จำเป็นเพื่อรวมปุ่มถัดไปและก่อนหน้า แต่สำหรับตัวอย่างนี้ เราจะกำหนดให้ส่วนที่ 3 เป็นส่วนสุดท้ายที่มีลิงก์การนำทาง

ดังนั้น เนื่องจากเราไม่ต้องการปุ่มถัดไป ให้ลบปุ่มถัดไปและแทนที่ด้วยตัวแบ่งเหมือนที่เราทำในส่วนที่ 1

อัปเดต URL ลิงก์ปุ่มก่อนหน้า

จากนั้นเปิดการตั้งค่าสำหรับปุ่มก่อนหน้าและอัปเดต URL ของลิงก์:

• URL ลิงก์ของปุ่ม: #two

URL “#two” จะข้ามกลับไปที่ส่วนที่มีรหัส CSS “สอง”

การสร้างส่วนล่าง

ตอนนี้มี 3 ส่วนครบถ้วนแล้วด้วยการนำทางแถวที่ติดหนึบและฟังก์ชันการเชื่อมโยงจุดยึด เราจะสร้างส่วนด้านล่างที่จะทำหน้าที่เป็นส่วนของหน้าที่ไม่มีการนำทางแบบติดหนึบถัดไป/ก่อนหน้า นี่เป็นการแสดงให้เห็นว่ามีส่วนเพิ่มเติมบนหน้าที่อาจไม่ต้องการการนำทางแบบติดหนึบหรือไม่

หากต้องการสร้างส่วนล่างสุด ให้ทำซ้ำส่วนบนสุดแล้วลากไปด้านล่างส่วนที่ 3

จากนั้นอัปเดตข้อความชื่อเป็น "ด้านล่าง"

การสร้าง Sticky Bottom Section

สำหรับขั้นตอนสุดท้ายของเรา เราต้องสร้างส่วนที่ติดหนึบซึ่งจะอยู่ที่ด้านล่างของหน้าและมีลิงก์การนำทางครั้งแรกและครั้งสุดท้าย (สมอ) ส่วนนี้ต้องอยู่ที่ด้านล่างของหน้าหากคุณต้องการให้ลิงก์การนำทางปรากฏบนทุกส่วนของหน้าเมื่อเลื่อน

ใต้ส่วนล่าง ให้สร้างส่วนปกติใหม่

จากนั้นอัปเดตป้ายกำกับของส่วนในมุมมองเลเยอร์ตามลำดับ (เช่น “ส่วนที่ติดหนึบ”)

การสร้างแถวสำหรับลิงค์การนำทางแรกและลิงค์สุดท้าย

เพื่อเพิ่มฟังก์ชันการนำทางในหน้าส่วนต่างๆ ของเรา เราจะสร้างปุ่มเพิ่มเติมสองปุ่ม (หรือลิงก์สมอ) ซึ่งจะข้ามไปยังส่วนแรก (ส่วนที่ 1) และส่วนสุดท้าย (ส่วนที่ 3) บนหน้า

ทำซ้ำ Sticky Row ในส่วนที่ 2 แล้วลากไปที่ Sticky Bottom Section

ในการสร้างแถวสำหรับลิงก์การนำทางครั้งแรกและครั้งสุดท้าย เราสามารถทำซ้ำแถวติดหนึบ (แถว 2) จากส่วนที่ 2 และลากไปยังส่วน Sticky Bottom ใหม่

อัปเดตการตั้งค่าแถว

สำหรับส่วนสุดท้ายนี้ เราจะทำให้ส่วนทั้งหมดมีความเหนียว เพื่อให้เราสามารถนำการตั้งค่าที่สืบทอดมาจากการตั้งค่าแถวที่ซ้ำกันออกและกำหนดตำแหน่งที่แน่นอนแทน

เปิดการตั้งค่าแถวและอัปเดตข้อมูลต่อไปนี้:

ถัดไป อัปเดตตัวเลือกตำแหน่งดังนี้:

• ตำแหน่ง: Absolute
• ตำแหน่ง: ล่างขวา
• ออฟเซ็ตแนวนอน: 0px
• ตำแหน่งติดหนึบ: ห้ามติด

ภายใต้แท็บการออกแบบ รีเซ็ตตัวเลือกการแปลงสำหรับแถว

เพิ่มปุ่มแรกและปุ่มสุดท้ายสำหรับส่วนที่ติดหนึบ

ในการสร้างปุ่มแรก ให้เปิดการตั้งค่าสำหรับปุ่มทางด้านซ้ายและอัปเดตสิ่งต่อไปนี้:

• ข้อความปุ่ม: ก่อน
• URL ลิงก์ของปุ่ม: #one

จากนั้นอัปเดตไอคอนปุ่มเป็นลูกศรขึ้นอื่น

ในการสร้างปุ่มสุดท้าย ให้เปิดการตั้งค่าสำหรับปุ่มทางด้านขวาและอัปเดตสิ่งต่อไปนี้:

• ข้อความปุ่ม: สุดท้าย
• URL ลิงก์ของปุ่ม: #three

จากนั้นอัปเดตไอคอนปุ่มเป็นลูกศรชี้ลงอื่น

อัปเดตการตั้งค่าส่วนสำหรับ Sticky Bottom Section

ถัดไป เปิดการตั้งค่าส่วนและอัปเดตสิ่งต่อไปนี้:

• ความกว้าง: 100%;
• ความสูง: 0px;
• ช่องว่างภายใน: ด้านบน 0px, 0px ด้านขวา

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

สุดท้าย ภายใต้แท็บขั้นสูง ให้อัปเดตสิ่งต่อไปนี้:

• ล้นแนวตั้ง: มองเห็นได้
• แนวนอนล้น: มองเห็นได้
• ตำแหน่งติดหนึบ: ติดที่ด้านล่าง
• ขีด จำกัด เหนียวยอดนิยม: บริเวณร่างกาย
• ออฟเซ็ตจากองค์ประกอบติดหนึบรอบข้าง: NO

ผลสุดท้าย

สังเกตว่าลิงก์การนำทางที่ติดหนึบเปลี่ยนแปลงอย่างไรเมื่อเลื่อนลงมาที่หน้า

สังเกตว่าการนำทางไปยังแต่ละส่วนนั้นง่ายเพียงใดโดยคลิกลิงก์การนำทาง

และนี่คือรูปลักษณ์ของการออกแบบบนมือถือ

ความคิดสุดท้าย

ลิงก์การนำทางหน้าแบบติดหนึบที่เราสร้างขึ้นในบทช่วยสอนนี้ควรมีประโยชน์สำหรับผู้ที่มองหาทางเลือกที่มีประสิทธิภาพในการเลื่อนแบบเดิมหรือรวมลิงก์สมอในส่วนหัวส่วนกลางของคุณ และคุณสามารถทำซ้ำส่วนต่างๆ ได้อย่างง่ายดายและอัปเดตลิงก์ Anchor (และ CSS ID ที่เกี่ยวข้องสำหรับแต่ละส่วน) เพื่อสร้างเนื้อหาเพิ่มเติม

เพื่อผลลัพธ์ที่ดีที่สุด แต่ละส่วนควรมีเนื้อหาเพียงพอที่จะขยายเกินความสูงของเบราว์เซอร์ หากไม่เป็นเช่นนั้น ลิงก์สมอเหล่านั้นอาจไม่เหนียวเหนอะ (หรือมองเห็นได้) วิธีง่ายๆ วิธีหนึ่งที่จะทำให้แน่ใจว่าสิ่งนี้จะเกิดขึ้นคือกำหนดความสูงขั้นต่ำแต่ละส่วนของคุณที่ 100vh หากคุณไม่ชอบ คุณสามารถเลือกที่จะกำจัดตัวเลือกการติดหนึบการแปลการแปลงสำหรับแถวปักหมุดแต่ละแถวเพื่อให้ปุ่มต่างๆ ยังคงปรากฏให้เห็น

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!