วิธีเพิ่มปุ่ม back-to-top แบบติดหนึบในเว็บไซต์ของคุณ

เผยแพร่แล้ว: 2019-06-18

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

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

ทั้งหมด.

ที.

ทาง.

ถึง.

ที.

สูงสุด.

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

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

ปุ่ม back-to-top แบบติดหนึบคืออะไร?

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

สิ่งที่ต้องพิจารณาก่อนเพิ่มปุ่ม back-to-top

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

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

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

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

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

วิธีเพิ่มปุ่ม back-to-top ที่ติดหนึบในไซต์ WordPress ของคุณ

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

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

มาเริ่มกันเลย! ฉันจะอธิบายแต่ละขั้นตอนของกระบวนการ และคุณยังสามารถติดตาม Codepen นี้ได้จาก Josh Masen วิศวกรส่วนหน้าของ Flywheel

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

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

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

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

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

<a class="top-link hide" href="" id="js-top">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="M12 6H0l6-6z"/></svg>
  <span class="screen-reader-text">Back to top</span>
</a>

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

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

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

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

<span class="screen-reader-text">Back to top</span>

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

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

.top-link {
  transition: all .25s ease-in-out;
  position: fixed;
  bottom: 0;
  right: 0;
  display: inline-flex;
  
 cursor: pointer;
 align-items: center;
 justify-content: center;
 margin: 0 3em 3em 0;
 border-radius: 50%;
 padding: .25em;
 width: 80px;
 height: 80px;
 background-color: #F8F8F8;

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

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

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

  .show {
    visibility: visible;
    opacity: 1;
  }
  
  .hide {
    visibility: hidden;
    opacity: 0;
  }

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

svg {
 fill: #000;
 width: 24px;
 height: 12px;
}

&:hover {
 background-color: #E8E8E8;

 	svg {
	 fill: #000000;
	}
}

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

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

// Text meant only for screen readers.
.screen-reader-text {
	position: absolute;
	clip-path: inset(50%);
	margin: -1px;
	border: 0;
	padding: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	word-wrap: normal !important;
	clip: rect(1px, 1px, 1px, 1px);

	&:focus {
		display: block;
		top: 5px;
		left: 5px;
		z-index: 100000; // Above WP toolbar
		clip-path: none;
		background-color: #eee;
		padding: 15px 23px 14px;
		width: auto;
		height: auto;
		text-decoration: none;
		line-height: normal;
		color: #444;
		font-size: 1em;
		clip: auto !important;
	}
}

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

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

// Set a variable for our button element.
const scrollToTopButton = document.getElementById('js-top');

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

const scrollFunc = () => {
  // Get the current scroll value
  let y = window.scrollY;
  
  // If the scroll value is greater than the window height, let's add a class to the scroll-to-top button to show it!
  if (y > 0) {
    scrollToTopButton.className = "top-link show";
  } else {
    scrollToTopButton.className = "top-link hide";
  }
};

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

window.addEventListener("scroll", scrollFunc);

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

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

const scrollToTop = () => {
  // Let's set a variable for the number of pixels we are from the top of the document.
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  
  // If that number is greater than 0, we'll scroll back to 0, or the top of the document.
  // We'll also animate that scroll with requestAnimationFrame:
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    // ScrollTo takes an x and a y coordinate.
    // Increase the '10' value to get a smoother/slower scroll!
    window.scrollTo(0, c - c / 10);
  }
};

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

// When the button is clicked, run our ScrolltoTop function above!
scrollToTopButton.onclick = function(e) {
  e.preventDefault();
  scrollToTop();
}

ถัดไป: ค้นพบ 19 ปลั๊กอิน WordPress ที่นักพัฒนาชื่นชอบ

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

แค่นั้นแหละ! ตอนนี้ คุณจะมีปุ่ม back-to-top ที่ทำงานได้อย่างสมบูรณ์และปรับแต่งได้บนเว็บไซต์ WordPress ของคุณ หากต้องการดูบทแนะนำการใช้งานจริงทั้งหมด อย่าลืมดู Codepen นี้จาก Josh Masen ซึ่งเป็นวิศวกรส่วนหน้าของ Flywheel!