วิธีเพิ่มปุ่ม Back-to-Top Sticky ให้กับเว็บไซต์ของคุณ

เผยแพร่แล้ว: 2023-02-12

เราทุกคนเคยไปที่นั่น คุณพบคำแนะนำออนไลน์ที่ยอดเยี่ยม เลื่อนไปจนสุดแล้วคิดว่า “ว้าว ฉันอยากเห็นว่าเว็บไซต์นี้มีอะไรให้บ้าง!”

แต่แล้วคุณต้องเลื่อน

ทั้งหมด.

เดอะ.

ทาง.

ถึง.

เดอะ.

สูงสุด.

แล้วคุณคิดว่า…. “อืม ไม่เป็นไร” และปิดหน้า

ในฐานะนักออกแบบเว็บไซต์ นี่เป็นเพียงสิ่งสุดท้ายที่คุณต้องการให้ผู้อื่นทำเมื่อพวกเขามาถึงไซต์ที่คุณกำลังสร้าง โชคดีที่แนวทางปฏิบัติที่ดีที่สุดสำหรับการออกแบบเว็บสมัยใหม่ได้ให้วิธีแก้ปัญหา UX ทั่วไปแก่เรา นั่นคือปุ่ม back-to-top ที่เหนียวเหนอะหนะ

ปุ่ม Back-to-Top Sticky คืออะไร?

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

สิ่งที่ควรพิจารณาก่อนเพิ่มปุ่ม Back-to-Top

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

ต่อไปนี้คือคำถามสองสามข้อที่ต้องตอบก่อนที่คุณจะสร้างปุ่มเลื่อนขึ้นด้านบน:

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

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

"แนวปฏิบัติที่ดีที่สุด" ที่ดีที่สุดที่จะปฏิบัติตามคือแนวทางที่อิงตามข้อมูลจากไซต์และผู้ใช้ของคุณเอง!

วิธีเพิ่มปุ่ม Back-to-Top Sticky ให้กับเว็บไซต์ WordPress ของคุณ

ในบทช่วยสอนนี้ ฉันจะแสดงวิธีเพิ่มปุ่ม back-to-top ที่เราใช้ใน Layout! ข้อแตกต่างเพียงอย่างเดียวคือเราวางส่วนหัวของเราไว้ที่ด้านบนของหน้าจอแทนที่จะเป็นมุมขวาล่าง (แต่ไม่ต้องกังวล มันเป็นแนวคิดเดียวกัน!)

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

หรือดูวิดีโอแนะนำการเพิ่มปุ่ม back-to-top แบบติดหนึบนี้!

ดูปุ่มเลื่อนขึ้นด้านบน Pen ES6 โดย Josh Lawler (@joshuamasen) บน CodePen

สำหรับบทช่วยสอนเกี่ยวกับปุ่ม back-to-top นี้ เราจะใช้สามภาษา:

  • HTML สำหรับมาร์กอัปเพื่อสร้างปุ่ม
  • CSS เพื่อจัดรูปแบบปุ่มและให้เข้ากับแบรนด์ของคุณ
  • JavaScript เพื่อให้ "ทำงาน" และกำหนดพฤติกรรมของปุ่ม

ใน HTML คุณจะพบบรรทัดต่อไปนี้:

 <a class="top-link ซ่อน" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="M12 6H0l6-6z"/></svg>
  <span class="screen-reader-text">กลับไปด้านบนสุด</span>
</a>

นี่จะเป็นปุ่มย้อนกลับสู่ด้านบนสุดเหนียวของคุณ! คุณจะเห็นว่าเราได้เพิ่มคลาส CSS ชื่อ .top-link และใช้ JavaScript ง่ายๆ เพื่อ "ทำให้มันใช้งานได้" เรากำลังใช้ SVG ในบรรทัดสำหรับปุ่ม

นอกจาก SVG แล้ว คุณยังสามารถใช้ไฟล์ภาพหรือไอคอนแบบอักษรเพื่อสร้างปุ่มได้อีกด้วย เราชอบวิธี SVG มากกว่า เนื่องจาก:

  1. โดยจะไม่เป็นพิกเซลในขนาดหน้าจอต่างๆ เหมือนกับภาพแรสเตอร์
  2. SVG ได้รับการสนับสนุนอย่างกว้างขวางในเบราว์เซอร์ต่างๆ (เย้ ประสบการณ์ผู้ใช้!)
  3. ง่ายต่อการจัดรูปแบบด้วย CSS คุณจึงเปลี่ยนแปลงทุกอย่างเกี่ยวกับมันได้อย่างง่ายดาย
  4. ใช้โค้ดเพียงบรรทัดเดียว ทำให้น้ำหนักเบาและเพิ่มประสิทธิภาพไซต์ได้ดียิ่งขึ้น

ส่วนสุดท้ายที่สำคัญมากที่คุณจะพบใน HTML คือบรรทัดนี้:

 <span class="screen-reader-text">กลับไปด้านบนสุด</span>

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

ตอนนี้เรามาพูดถึงคลาส CSS กันดีกว่า . .top-link เรากำลังใช้ปุ่มนี้เพื่อจัดรูปแบบปุ่ม และเป็นที่ที่คุณจะกำหนดคุณสมบัติต่างๆ เช่น ขนาดของปุ่ม ขนาดของช่องว่างภายในปุ่ม สี ฯลฯ

 .top-link {
  การเปลี่ยนแปลง: ทั้งหมด .25s เข้า-ออกง่าย;
  ตำแหน่ง: คงที่;
  ด้านล่าง: 0;
  ขวา: 0;
  จอแสดงผล: อินไลน์-flex;
  
 เคอร์เซอร์: ตัวชี้;
 จัดรายการ: ศูนย์;
 ปรับเนื้อหา: ศูนย์;
 ขอบ: 0 3em 3em 0;
 รัศมีเส้นขอบ: 50%;
 ช่องว่างภายใน: .25em;
 ความกว้าง: 80px;
 ความสูง: 80px;
 สีพื้นหลัง: #F8F8F8;

หมายเหตุ: เรากำลังใช้ Sass (ภาษาสไตล์ชีต) เพื่อเขียน CSS ให้เร็วขึ้นเล็กน้อย เรียนรู้เพิ่มเติมเกี่ยวกับพรีโปรเซสเซอร์ที่นี่

ชิ้นส่วนสำคัญสองสามชิ้นจากส่วนย่อยนี้: transition: all .25s ease-in-out ; ควบคุมว่าปุ่มของคุณจะปรากฏหรือหายไปบนหน้าจอ "เร็ว" แค่ไหน และ position: fixed ; เป็นสิ่งที่ทำให้ปุ่ม "ติด" ในตำแหน่งที่คุณต้องการ

ถัดไป คุณจะเห็นกฎสำหรับ .show และ .hide เราจะใช้ JavaScript เพื่อสลับระหว่างคลาสเหล่านี้เพื่อบอกเบราว์เซอร์เมื่อปุ่มควร (หรือไม่ควร) ปรากฏบนหน้า

 .แสดง {
    การมองเห็น: มองเห็นได้;
    ความทึบ: 1;
  }
  
  .ซ่อน {
    การมองเห็น: ซ่อน;
    ความทึบ: 0;
  }

ก่อนที่เราจะเข้าสู่ JavaScript มีเพียงไม่กี่บรรทัดที่เราจะเพิ่มใน CSS

 svg {
 เติม: #000;
 ความกว้าง: 24px;
 ความสูง: 12px;
}
&:เลื่อน {
 สีพื้นหลัง: #E8E8E8;
 	svg {
	 กรอก: #000000;
	}
}

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

สุดท้าย เราจะเพิ่ม CSS เพื่อซ่อนข้อความที่ระบุว่า "กลับไปด้านบน" สำหรับโปรแกรมอ่านหน้าจอ

 // ข้อความสำหรับโปรแกรมอ่านหน้าจอเท่านั้น
.screen-reader-text {
	ตำแหน่ง: แน่นอน;
	เส้นทางคลิป: สิ่งที่ใส่เข้าไป (50%);
	ขอบ: -1px;
	เส้นขอบ: 0;
	ช่องว่างภายใน: 0;
	ความกว้าง: 1px;
	ความสูง: 1px;
	ล้น: ซ่อน;
	ตัดคำ: ปกติ !important;
	คลิป: rect(1px, 1px, 1px, 1px);
	&:จุดสนใจ {
		จอแสดงผล: บล็อก;
		ด้านบน: 5px;
		ซ้าย: 5px;
		ดัชนี z: 100,000; // เหนือแถบเครื่องมือ WP
		เส้นทางคลิป: ไม่มี;
		สีพื้นหลัง: #eee;
		ช่องว่างภายใน: 15px 23px 14px;
		ความกว้าง: รถยนต์;
		ความสูง: รถยนต์;
		การตกแต่งข้อความ: ไม่มี;
		ความสูงของเส้น: ปกติ;
		สี: #444;
		ขนาดตัวอักษร: 1em;
		คลิป: อัตโนมัติ !important;
	}
}

ตอนนี้ไปที่ JavaScript! เราจะดำเนินการนี้โดยไม่ต้องโหลด jQuery ซึ่งจะช่วยให้โค้ดของคุณมีน้ำหนักเบาและโหลดได้รวดเร็ว

ตัวแปรแรกจะช่วยให้เบราว์เซอร์ค้นหาปุ่ม

 // ตั้งค่าตัวแปรสำหรับองค์ประกอบปุ่มของเรา
const scrollToTopButton = document.getElementById('js-top');

ต่อไป เราจะสร้างฟังก์ชันที่แสดงปุ่มเลื่อนขึ้นด้านบน หากผู้ใช้เลื่อนเกินความสูงของหน้าต่างเริ่มต้น

 const scrollFunc = () => {
  // รับค่าการเลื่อนปัจจุบัน
  ให้ y = window.scrollY;
  
  // หากค่า scroll มากกว่าความสูงของหน้าต่าง ให้เพิ่ม class ไปที่ปุ่ม scroll-to-top เพื่อแสดง!
  ถ้า (y > 0) {
    scrollToTopButton.className = "แสดงลิงค์บนสุด";
  } อื่น {
    scrollToTopButton.className = "ซ่อนลิงค์บนสุด";
  }
};

นอกจากนี้ เราจะเพิ่มตัวฟังเหตุการณ์ ซึ่งจะคอยดูเมื่อผู้ใช้เลื่อนดู (เพื่อให้เรารู้ว่าพวกเขาอยู่ที่ใดในหน้า)

 window.addEventListener("เลื่อน", scrollFunc);

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

เราจะเพิ่มแอนิเมชั่นเล็กน้อยที่นี่ด้วย เพื่อให้การกระโดดไม่กะทันหันเกินไป

 const scrollToTop = () => {
  // ตั้งค่าตัวแปรสำหรับจำนวนพิกเซลที่เราอยู่จากด้านบนของเอกสาร
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  
  // ถ้าตัวเลขนั้นมากกว่า 0 เราจะเลื่อนกลับไปที่ 0 หรือด้านบนของเอกสาร
  // เราจะเคลื่อนไหวการเลื่อนนั้นด้วย requestAnimationFrame:
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  ถ้า (ค > 0) {
    window.requestAnimationFrame(เลื่อนไปด้านบน);
    // ScrollTo รับพิกัด x และ ay
    // เพิ่มค่า '10' เพื่อให้การเลื่อนราบรื่นขึ้น/ช้าลง!
    window.scrollTo(0, ค - ค / 10);
  }
};

สุดท้าย แต่ไม่ท้ายสุด เราเพียงแค่ต้องบอกให้เพจเรียกใช้ฟังก์ชันนั้นเมื่อมีคนคลิกปุ่มย้อนกลับสู่ด้านบนของเรา

 // เมื่อคลิกปุ่มแล้ว ให้เรียกใช้ฟังก์ชัน ScrolltoTop ของเราด้านบน!
scrollToTopButton.onclick = ฟังก์ชัน (จ) {
  e.preventDefault();
  scrollToTop();
}

แค่นั้นแหละ! ตอนนี้คุณจะมีปุ่ม back-to-top ที่ทำงานได้อย่างสมบูรณ์และปรับแต่งได้บนไซต์ WordPress ของคุณ