วิธีเพิ่ม Smooth Scroll to Top Effect ใน WordPress โดยใช้ jQuery

คุณต้องการเพิ่มการเลื่อนแบบเรียบไปที่ด้านบนของเอฟเฟกต์หน้าบนเว็บไซต์ WordPress ของคุณหรือไม่?

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

ในบทความนี้ เราจะแสดงวิธีเพิ่มเอฟเฟกต์การเลื่อนขึ้นบนอย่างราบรื่นใน WordPress โดยใช้ jQuery และปลั๊กอิน

Smooth Scroll คืออะไรและควรใช้เมื่อใด

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

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

คุณสามารถเพิ่มฟังก์ชันนี้เป็นลิงก์ข้อความธรรมดาโดยไม่ต้องใช้ jQuery ดังนี้:

<a href="#" title="Back to top">^Top</a>

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

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

ที่กล่าวว่าเรามาดูกันว่าคุณสามารถเพิ่มการเลื่อนแบบเรียบไปที่เอฟเฟกต์ด้านบนโดยใช้ปลั๊กอิน WordPress และ jQuery ได้อย่างไร

วิธีเพิ่มเอฟเฟกต์การเลื่อนขึ้นบนอย่างราบรื่นโดยใช้ปลั๊กอิน WordPress

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

สิ่งแรกที่คุณต้องทำคือติดตั้งและเปิดใช้งานปลั๊กอิน WPFront Scroll Top หากคุณต้องการความช่วยเหลือ โปรดดูคำแนะนำในการติดตั้งปลั๊กอิน WordPress

เมื่อเปิดใช้งาน คุณสามารถไปที่การ ตั้งค่า » เลื่อนด้านบน จากแดชบอร์ด WordPress ของคุณ คุณสามารถกำหนดค่าปลั๊กอินและปรับแต่งเอฟเฟกต์การเลื่อนอย่างราบรื่นได้ที่นี่

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

หากคุณเลื่อนลงมา คุณจะพบตัวเลือกเพิ่มเติม เช่น แก้ไขเวลาซ่อนอัตโนมัติ เปิดใช้งานตัวเลือกเพื่อซ่อนปุ่มบนอุปกรณ์ขนาดเล็ก และซ่อนปุ่มนั้นบนหน้าจอ wp-admin

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

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

ปลั๊กอิน WPFront Scroll Top ยังมีตัวกรองเพื่อแสดงปุ่มเลื่อนไปด้านบนเฉพาะในหน้าที่เลือกเท่านั้น

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

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

หากคุณไม่พบปุ่มรูปภาพที่สร้างไว้ล่วงหน้าที่เหมาะกับคุณ แสดงว่ามีตัวเลือกในการอัปโหลดรูปภาพที่กำหนดเองจากไลบรารีสื่อของ WordPress

เมื่อเสร็จแล้ว เพียงคลิกปุ่ม 'บันทึกการเปลี่ยนแปลง'

ตอนนี้คุณสามารถเยี่ยมชมเว็บไซต์ของคุณเพื่อดูการทำงานของปุ่มเลื่อนไปด้านบน

การเพิ่ม Smooth Scroll to Top Effect ด้วย jQuery ใน WordPress

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

เราจะใช้ jQuery, CSS บางตัว และโค้ด HTML บรรทัดเดียวในธีม WordPress ของคุณเพื่อเพิ่มเอฟเฟกต์การเลื่อนบนสุดที่ราบรื่น

ขั้นแรก เปิดโปรแกรมแก้ไขข้อความ เช่น Notepad และสร้างไฟล์ ไปข้างหน้าและบันทึกเป็น smoothscroll.js

ถัดไป คุณจะต้องคัดลอกและวางรหัสนี้ลงในไฟล์:

jQuery(document).ready(function($){
	$(window).scroll(function(){
        if ($(this).scrollTop() < 200) {
			$('#smoothup') .fadeOut();
        } else {
			$('#smoothup') .fadeIn();
        }
    });
	$('#smoothup').on('click', function(){
		$('html, body').animate({scrollTop:0}, 'fast');
		return false;
		});
});

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

หากธีมของคุณไม่มีไดเร็กทอรี /js/ คุณสามารถสร้างไดเร็กทอรีและอัปโหลด smoothscroll.js ไปที่ไดเร็กทอรีได้ คุณยังสามารถดูคำแนะนำของเราเกี่ยวกับไฟล์ WordPress และโครงสร้างไดเร็กทอรีสำหรับข้อมูลเพิ่มเติม

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

สิ่งต่อไปที่คุณต้องทำคือโหลดไฟล์ smoothscroll.js ในธีมของคุณ ในการทำเช่นนั้น เราจะจัดคิวสคริปต์ใน WordPress

หลังจากนั้น เพียงคัดลอกและวางโค้ดนี้ลงในไฟล์ functions.php ของธีมของคุณ เราไม่แนะนำให้แก้ไขไฟล์ธีมโดยตรง เนื่องจากความผิดพลาดเพียงเล็กน้อยอาจทำให้ไซต์ของคุณเสียหายได้ คุณสามารถใช้ปลั๊กอินเช่น WPCode และทำตามบทช่วยสอนของเราเกี่ยวกับวิธีเพิ่มข้อมูลโค้ดที่กำหนดเองใน WordPress แทน

wp_enqueue_script( 'smoothup', get_template_directory_uri() . 'https://cdn2.wpbeginner.com/js/smoothscroll.js', array( 'jquery' ), '',  true );

ในโค้ดด้านบน เราได้บอกให้ WordPress โหลดสคริปต์ของเราและโหลดไลบรารี jQuery ด้วย เนื่องจากปลั๊กอินของเราขึ้นอยู่กับมัน

ตอนนี้เราได้เพิ่มส่วน jQuery แล้ว ให้เพิ่มลิงก์จริงไปยังไซต์ WordPress ของเราที่นำผู้ใช้กลับไปที่ด้านบนสุด เพียงวาง HTML นี้ไว้ที่ใดก็ได้ในไฟล์ footer.php ของธีมของคุณ หากคุณต้องการความช่วยเหลือ โปรดดูบทแนะนำเกี่ยวกับวิธีเพิ่มโค้ดส่วนหัวและส่วนท้ายใน WordPress

<a href="#top" id="smoothup" title="Back to top"></a>

คุณอาจสังเกตเห็นว่าโค้ด HTML มีลิงก์ แต่ไม่มี anchor text นั่นเป็นเพราะว่าเราจะใช้ไอคอนรูปภาพที่มีลูกศรขึ้นเพื่อแสดงปุ่มกลับไปด้านบน

ในตัวอย่างนี้ เราใช้ไอคอนขนาด 40x40px เพียงเพิ่ม CSS ที่กำหนดเองด้านล่างลงในสไตล์ชีตของธีมของคุณ

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

#smoothup {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("https://www.example.com/wp-content/uploads/2013/07/top_icon.png");
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s; transition-duration: 0.4s;
}

#smoothup:hover {
-webkit-transform: rotate(360deg) }
background: url('') no-repeat;
}

ใน CSS ด้านบน ตรวจสอบให้แน่ใจว่าคุณได้แทนที่ https://www.example.com/wp-content/uploads/2013/07/top_icon.png ด้วย URL รูปภาพที่คุณต้องการใช้ คุณสามารถอัปโหลดไอคอนรูปภาพของคุณเองได้โดยใช้ตัวอัปโหลดสื่อ WordPress คัดลอก URL รูปภาพ แล้ววางลงในโค้ด

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

หากคุณชอบบทความนี้ โปรดสมัครรับข้อมูลจากบทแนะนำวิดีโอ YouTube Channel สำหรับ WordPress คุณสามารถหาเราได้ที่ Twitter และ Facebook