สุดยอดปลั๊กอิน WordPress Smooth Scroll ฟรีที่ดีที่สุด 2022

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

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

จะเพิ่ม Smooth Scroll to Top Effect ใน WordPress โดยใช้ jQuery ได้อย่างไร?

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

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

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

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

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

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

 <a href="#" title="กลับไปด้านบน">^ท็อป</a>

จะส่งผู้อ่านไปที่ด้านบนของหน้าในขณะที่เลื่อนขึ้นภายในเสี้ยววินาที มันทำงานเป็นหนึ่งฟังก์ชั่น

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

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

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

ในการเริ่มต้นคุณต้องเปิดโปรแกรมแก้ไขข้อความ เช่น Notepad ตอนนี้ คุณต้องสร้างไฟล์และบันทึกเป็น smoothscroll.js ตอนนี้คุณต้องคัดลอกวางโค้ดลงในพื้นที่ไฟล์:

jQuery(เอกสาร).พร้อม(ฟังก์ชัน($){
$(หน้าต่าง).เลื่อน(ฟังก์ชั่น(){
ถ้า ($((นี้).scrollTop() < 200) {
$('#smoothup') .fadeOut(); $('#smoothup') .fadeOut();
} 
อื่น {
$('#smoothup') .fadeIn(); $('#smoothup') .fadeIn(); $('#smoothup').
}
});
   $('#smoothup').on('คลิก', function(){
$('html, body').animate({scrollTop:0}, 'เร็ว');
คืนค่าเท็จ;
});
});

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

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

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

wp_enqueue_script('smooth up', get_template_directory_uri() . '/js/smoothscroll.js', array('jquery' ), ”, จริง );
รหัสนี้ส่ง WordPress คำสั่งสคริปต์ ในเวลาเดียวกัน มันยังบอกให้ WordPress โหลดไลบรารี jQuery เนื่องจากปลั๊กอินนั้นขึ้นอยู่กับมัน

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

 <a href="#top" title="กลับไปด้านบน"></a>

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

#สมูทอัพ{ 
ความสูง: 40px; 
ความกว้าง: 40px; 
ตำแหน่ง:คงที่;
ด้านล่าง:50px;
ขวา:100px;
ข้อความเยื้อง:-9999px;
แสดง:ไม่มี;
พื้นหลัง: url("http://www.example.com/wp-content/uploads/2013/07/top_icon.png"); 
-webkit-transition-duration: 0.4 วินาที; 
-moz-การเปลี่ยนแปลง-duration: 0.4s; ระยะเวลาการเปลี่ยนภาพ: 0.4s; 
}
 
#smoothup: โฮเวอร์ {
-webkit-transform: หมุน (360deg) }
พื้นหลัง: url('') ไม่ซ้ำ;
}

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

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

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

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

ปลั๊กอินเลื่อนที่ราบรื่นของปี 2022 – น้ำหนักเบาและเร็วมาก

ปลั๊กอิน WordPress Smooth Scroll จะทำงานเร็วขึ้นและมีประสิทธิภาพมากบนอุปกรณ์และเบราว์เซอร์อื่นๆ ทั้งหมดโดยไม่มีปัญหาใดๆ

นอกจากนี้ยังใช้งานได้ดีกับปลั๊กอินอื่น ๆ เช่น Yoast SEO, Contact Form 7, NextGen Gallery, Slider Revolution, WooCommerce, ตัวสร้างเพจ SKT, Visual Composer และ Elementor และอีกมากมาย

เว็บไซต์ธุรกิจขนาดใหญ่หรือเว็บไซต์ธุรกิจขนาดเล็ก เช่น Blog, เว็บไซต์ Portfolio, เว็บไซต์ให้คำปรึกษา, เว็บไซต์องค์กร, เว็บไซต์ที่เกี่ยวข้องกับอีคอมเมิร์ซ, Creative Agency, เว็บไซต์อสังหาริมทรัพย์, ประวัติส่วนตัว, เว็บไซต์บริษัทค้าปลีก ฯลฯ สามารถใช้ WordPress Smooth Scroll Plugins เพื่อปรับปรุง รูปลักษณ์ของเว็บไซต์

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

1. เลื่อนหน้าไปที่ id :

Page scroll to id เป็นซอฟต์แวร์โอเพ่นซอร์สที่มีคุณสมบัติครบถ้วนและมาพร้อมกับคุณสมบัติและฟังก์ชันที่ได้รับการพัฒนามาอย่างดี มันให้เอฟเฟกต์แอนิเมชั่นการเลื่อนที่ราบรื่นแก่คุณ
หน้าเลื่อนไปที่ id ปลั๊กอินสามารถปรับได้ ด้วยความช่วยเหลือของ id และ offset ที่กล่าวถึงปลั๊กอินนี้จะคำนวณขนาดของหน้าและตั้งค่าโดยอัตโนมัติ

2. เมนู Sticky (หรืออะไรก็ได้!) บน Scroll:

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

3. WordPress Infinite Scroll – Ajax Load More :

Ajax Load more สร้างขึ้นเป็นพิเศษสำหรับผู้ใช้ WordPress เพื่อให้เลื่อนดูเว็บไซต์ได้อย่างราบรื่น Ajax load more ช่วยในการโหลดโพสต์ขี้เกียจ โพสต์เดี่ยว เพจ และแสดงความคิดเห็น ปลั๊กอินเหล่านี้เป็นที่รู้จักมากที่สุดสำหรับปลั๊กอินอีคอมเมิร์ซเช่น WooCommerce

4. ลิงค์เลื่อนเรียบง่าย:

คุณสามารถสร้างคุณสมบัติจากล่างขึ้นบนได้ด้วยตัวเอง เพราะ SEasy Smooth Scroll Links เป็นปลั๊กอินที่ปรับแต่งได้และมีน้ำหนักเบามาก

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

5. MouseWheel Smooth Scroll:

ปลั๊กอิน MouseWheel Smooth Scroll นั้นราบรื่นมากในการเลื่อนสำหรับลิงก์สมอทั้งหมด ปกติจะอยู่ทางด้านขวามือ ซึ่งจะเลื่อนหน้าจากล่างขึ้นบน

ดังนั้นปลั๊กอินนี้จึงสนับสนุน RTL และไม่สร้างรายการเมนูที่ไม่มีประโยชน์ในแดชบอร์ด WordPress

6. Smooth Scroll โดย WPOS :

เนื่องจากปลั๊กอิน Smooth Scroll by WPOS นั้นมีน้ำหนักเบา คุณจึงสามารถปรับแต่งการเลื่อนจากบนลงล่างของทุกหน้าได้อย่างง่ายดาย คุณไม่จำเป็นต้องเขียนโค้ดแม้แต่บรรทัดเดียว

สามารถปรับความเร็วของภาพเคลื่อนไหว ชนิด ความสูง ความกว้าง ฯลฯ ได้ตามความต้องการ ปลั๊กอินนี้ทำงานได้ดีขึ้นกับตัวสร้างหน้า Elementor

7. ปุ่มเลื่อนไปที่ด้านบนอย่างง่าย:

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

– เลือกสมัครได้ทุกโพสต์และเพจ
– เลือกหน้าแรกเท่านั้น
– เลือกเฉพาะหน้าเท่านั้น
– เลือกเฉพาะโพสต์เท่านั้น
– กำหนดความเร็วของสกรอลล์

8. NS Smooth เลื่อนกลับไปด้านบน :

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

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

9. WPFront เลื่อนด้านบน:

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

10. จับ Infinite Scroll:

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

ทั้งหมดนี้เป็นปลั๊กอิน WordPress Smooth Scroll ฟรีอันดับต้น ๆ ฟรี 2022