เช่นปุ่ม "ขึ้น" สำหรับไซต์ทำให้ทรัพยากรอินเทอร์เน็ตสะดวกยิ่งขึ้นสำหรับผู้เยี่ยมชม ช่วยให้คุณย้ายจากที่ใดก็ได้บนหน้าไปยังด้านบนของหน้าได้อย่างง่ายดาย นี่เป็นสิ่งจำเป็นสำหรับร้านค้าออนไลน์และเว็บไซต์ที่มีบทความขนาดใหญ่ที่ต้องเลื่อนลงมาเป็นเวลานาน
เพื่ออะไร
ในขณะนี้ เว็บไซต์ส่วนใหญ่ไม่มีฟังก์ชันเช่นปุ่ม "ขึ้น" และไม่มีอะไรสำคัญในเรื่องนี้ แต่การใช้งานนั้นมีประโยชน์มากมายทั้งต่อทรัพยากรอินเทอร์เน็ตและผู้เยี่ยมชม
ผลประโยชน์สำหรับผู้มาเยี่ยม
มันมักจะเกิดขึ้นเมื่อหน้าของแหล่งข้อมูลทางอินเทอร์เน็ตเต็มไปด้วยข้อมูล เมื่อบทความที่ให้ข้อมูลใช้พื้นที่มาก และคุณต้องเลื่อนหน้าลงด้วยล้อเลื่อนของเมาส์ นอกจากนี้ ในช่วงท้ายบทความอาจมีความคิดเห็นมากมาย
เมื่อผู้มาเยี่ยมชมอ่านบทความ การเลื่อนหน้าลงมานั้นไม่มีอะไรน่าเบื่อหน่าย แต่เมื่อข้อความสิ้นสุดลงและคุณต้องเลื่อนขึ้น มันก็เริ่มจะน่าเบื่อหน่อยๆ คนส่วนใหญ่มักจะขี้เกียจเกินกว่าจะเลื่อนดูเป็นเวลานาน และพวกเขาก็จะปิดไซต์ แทนที่จะเดินไปรอบๆ พื้นที่กว้างใหญ่
ใช้ปุ่มเพื่อย้ายไปที่ด้านบนของหน้าทันทีทำให้ใช้เวลาบนไซต์สะดวกยิ่งขึ้น
ประโยชน์สำหรับทรัพยากรทางอินเทอร์เน็ต
ข้อดีของทรัพยากรนั้นมาจากปัจจัยในอดีต เนื่องจากการนำทางเว็บไซต์ที่ง่ายขึ้นจะช่วยปรับปรุงปัจจัยด้านพฤติกรรม เนื่องจากผู้เยี่ยมชมทั้งหมดจะมีความกระตือรือร้นในการกระทำของตนมากขึ้นและย้ายไปที่หน้าอื่น
ดังนั้น ปัจจัยด้านพฤติกรรมเหล่านี้จึงส่งผลต่อทัศนคติของเครื่องมือค้นหาทั้งหมดที่มีต่อไซต์และนำไปสู่การปรับปรุงตำแหน่งในผลการค้นหา
วิธีทำปุ่ม "ขึ้น" บนไซต์ด้วยตัวคุณเอง
ขายต่อไป. คุณสามารถสร้างปุ่มเลื่อนขึ้นสำหรับไซต์บน CMS ใดก็ได้ด้วยตัวเองโดยทำตามขั้นตอนง่ายๆ เพียงไม่กี่ขั้นตอน:
- การสร้างภาพ;
- กำลังสร้างสคริปต์;
- สร้างสไตล์ปุ่ม
- กำลังเพิ่มในเว็บไซต์
ภาพปุ่ม
ในการเพิ่มปุ่ม "ขึ้น" บนไซต์ ก่อนอื่นคุณต้องสร้างไอคอนขึ้นมาเอง เมื่อคลิกแล้ว ผู้ใช้จะย้ายไปที่ด้านบนสุดของหน้า ในการทำเช่นนี้ คุณสามารถใช้ตัวเลือกสำเร็จรูป ซึ่งคุณสามารถเลือกตัวเลือกที่เหมาะสมที่สุดได้เสมอ
ในการปรับปรุงลักษณะที่ปรากฏของปุ่ม เราจำเป็นต้องทำการปรับปรุง กล่าวคือ การสร้างสไปรต์ที่ช่วยให้เรารวมภาพพื้นหลังตาม CSS ได้ จึงสร้างแอนิเมชั่นออกมาได้
สำหรับงานกราฟิก คุณสามารถใช้ตัวแก้ไขใดก็ได้ แต่ตัวเลือกที่สะดวกที่สุดคือบริการออนไลน์PIXLR เนื่องจากไม่มีอะไรให้ดาวน์โหลดที่นี่ และคุณสามารถใช้มันโดยตรงในเบราว์เซอร์ของคุณ
เพื่อเริ่มต้น ในหน้าต่างตัวแก้ไขที่ปรากฏขึ้น ให้เลือกฟิลด์ "อัปโหลดรูปภาพจากคอมพิวเตอร์" ลองเอาภาพจรวดเป็นตัวอย่าง
หากขนาดของไอคอนที่เลือกใหญ่เกินไป คุณจะต้องทำการปรับขนาดให้เล็ก ในการดำเนินการนี้ ไปที่เมนูด้านบนและเลือกช่อง "แก้ไข" และหลังจาก "แปลงฟรี …"
ถัดไป เครื่องหมายพิเศษจะปรากฏถัดจากรูปภาพ ซึ่งคุณสามารถเปลี่ยนขนาดของรูปภาพได้ เพื่อรักษาสัดส่วน คุณสามารถใช้ปุ่ม Shift โดยกดค้างไว้เพื่อย้ายเครื่องหมายสีน้ำเงิน เมื่อสิ้นสุดขั้นตอนเหล่านี้ จะได้ภาพจรวด
ขั้นตอนต่อไปคือการสร้างสำเนาของเลเยอร์
ตอนนี้คุณต้องย้ายรูปภาพของจรวดจากเลเยอร์ใหม่ขึ้นเล็กน้อย เมื่อต้องการทำเช่นนี้ จะสะดวกในการใช้เครื่องมือย้าย ซึ่งอยู่ในคอลัมน์ที่สองของเมนูด้านซ้าย และลูกศรขึ้นบนแป้นพิมพ์
ตอนนี้เราต้องทำให้ภาพบนเป็นขาวดำ สามารถทำได้โดยใช้รายการ "การแก้ไข" - "ฮิว / ความอิ่มตัว" ในเมนูด้านบน สำหรับการลดความอิ่มตัวของสีโดยสมบูรณ์ ควรตั้งค่าตัวเลื่อนความอิ่มตัวเป็น -100 การดำเนินการนี้จะช่วยให้คุณสร้างเอฟเฟกต์โดยที่ปุ่ม "ขึ้น" จะเปลี่ยนจากขาวดำเป็นสีเมื่อคุณวางเมาส์เหนือปุ่มนั้น
สุดท้ายคือการลบช่องว่างรอบ ๆ สองภาพออก ในการดำเนินการนี้ เลือกรายการ "ครอบตัด" จากเมนูด้านซ้ายและเราเลือกจรวดเพียงสองตัวในรูปสี่เหลี่ยมผืนผ้า ในการครอบตัด ให้กดปุ่ม Enter
ผลลัพธ์คือรูปภาพที่ไม่มีพื้นที่ว่างเพิ่มเติม คุณจะต้องจดความกว้างและความสูงของภาพที่ได้ เนื่องจากข้อมูลเหล่านี้จะเป็นประโยชน์ในขั้นตอนต่อไป
ในการบันทึก คุณต้องคลิกที่ "ไฟล์" - "บันทึก" โดยในย่อหน้าซ้าย "คอมพิวเตอร์ของฉัน" เราเขียนชื่อรูปภาพ (เฉพาะเลย์เอาต์ภาษาอังกฤษ) เลือกรูปแบบ (ในนี้) กรณี, PNG) และคลิกปุ่ม "ใช่"
ไฟล์ที่มีสคริปต์ของปุ่ม "ขึ้น"
คุณไม่จำเป็นต้องเขียนสคริปต์ในกรณีนี้ จะสามารถใช้เวอร์ชันสาธารณะได้โดยทำการแก้ไขโค้ดที่ทำเสร็จแล้ว
ในการดำเนินการนี้ คุณต้องดาวน์โหลดโปรแกรมแก้ไขโค้ดใดๆ ตัวเลือกยอดนิยมและฟรีคือ Notepad++ หลังจากติดตั้งแล้ว คุณต้องคัดลอกและวางรหัสทั้งหมดลงในนั้น:
| $(เอกสาร).พร้อม(ฟังก์ชั่น(){ $(หน้าต่าง).scroll(ฟังก์ชั่น () {ถ้า ($((นี่).scrollTop() > 0) {$('scroller').fadeIn ();} อื่น {$('scroller').fadeOut();}}); $('scroller').click(function () {$('body, html').animate({scrollTop: 0}, 400); คืนค่าเท็จ;}); }); |
ถัดไป คลิกในเมนูด้านบน "ไฟล์" - "บันทึกเป็น …" หลังจากนั้นเราจะบันทึกโค้ดในรูปแบบ.js หลังจากนั้น คุณสามารถใช้โค้ดนี้บนไซต์ของคุณโดยอัปโหลดไฟล์สคริปต์และรูปภาพโดยใช้การเชื่อมต่อ FTP
ติดตั้งบนเว็บไซต์
ในการตั้งค่าปุ่มเลื่อนขึ้นสำหรับเว็บไซต์ คุณต้องวางในรหัสสถานที่ที่จำเป็น คุณต้องป้อนก่อนแท็ก.
การสร้างสไตล์ปุ่มด้วย CSS
โดยส่วนใหญ่ ปุ่ม "ขึ้น" สำหรับเว็บไซต์จะอยู่ที่ด้านล่าง ("ส่วนท้าย")
ต้องเพิ่มรหัสต่อไปนี้ในไฟล์ style.css ของเว็บไซต์:
|
/ปุ่มขึ้น/ .scrollTop{ background:url('images/up.png') 0 0 no-repeat;/native image path/ width:39px;/ ปุ่ม width/ height:96px;/ความสูงของปุ่ม 50%/ bottom:5px;/bottom padding at fixed position/ left:89%;/เลื่อนไปทางซ้าย/ }.scrollTop:hover{ background-position:0 -108px; } /การชดเชยพื้นหลัง/" |
ในกรณีนี้ จำเป็นต้องใช้ข้อมูลความกว้างและความสูงของรูปภาพเหล่านั้น ยังคงเป็นเพียงการป้อนข้อมูลที่ได้รับลงในรหัสและปุ่ม "ขึ้น" สำหรับไซต์จะพร้อม! อะไรอีก
ปุ่มขึ้นสำหรับเว็บไซต์ Wordpress
สำหรับ CMS นี้ ปุ่ม "ขึ้น" สามารถสร้างได้โดยใช้ปลั๊กอินเช่นกัน
วิธีปลั๊กอินเป็นวิธีที่สะดวกและง่ายต่อการติดตั้ง เนื่องจากคุณเพียงแค่คลิกที่ปุ่มติดตั้งและกำหนดค่าฟังก์ชันทั้งหมดในเมนูปลั๊กอิน
ตัวเลือกหลังควรได้รับการติดต่อด้วยความระมัดระวัง เนื่องจากจะทำให้ติดไวรัสบนไซต์ได้ง่าย ตัวเลือกที่ได้รับความนิยมและได้รับการพิสูจน์แล้วมากที่สุดคือปลั๊กอินที่เรียกว่า Scroll Back To Top คุณสามารถดาวน์โหลดได้โดยใช้การค้นหามาตรฐานสำหรับปลั๊กอิน Wordpress
ส่วนขยายนี้มีฟังก์ชันต่างๆ และการปรับแต่งปุ่ม "ขึ้น" สำหรับไซต์ Wordpress จะง่ายมาก ไม่จำเป็นต้องเปลี่ยนค่าทั้งหมดเลย คุณเพียงแค่กำหนดค่าลักษณะที่ปรากฏและตำแหน่งของปุ่มบนหน้าเว็บไซต์
อย่างที่คุณเห็น การตั้งค่าปุ่มด้วยปลั๊กอินนั้นง่ายมาก แต่มีข้อแตกต่างที่สำคัญประการหนึ่งคือ ปลั๊กอินที่ติดตั้งแต่ละตัวจะโหลด CMS ซึ่งอาจส่งผลต่อความเร็วของทรัพยากรอินเทอร์เน็ต นั่นคือเหตุผลที่เจ้าของเว็บไซต์ส่วนใหญ่พยายามทำการเปลี่ยนแปลงทั้งหมดในโค้ดโดยตรง ไม่ใช่ด้วยความช่วยเหลือของส่วนขยายของบุคคลที่สาม คุณสามารถสร้างปุ่ม "ขึ้น" สำหรับไซต์ HTML ได้ ซึ่งจะลดการใช้ทรัพยากรให้เหลือน้อยที่สุด
ก่อนเปลี่ยนไฟล์ระบบ Wordpress ทั้งหมด คุณต้องสำรองข้อมูล จากนั้นคุณสามารถทำตามขั้นตอนทั้งหมดเพื่อสร้างปุ่มของคุณเองตามที่อธิบายข้างต้น
ปุ่ม "ขึ้น" สำหรับ Joomla
CMS Joomla ยังรองรับการติดตั้งปลั๊กอิน เช่น Wordpress เวอร์ชันที่ประสบความสำเร็จมากที่สุดของปุ่ม "ขึ้น" สำหรับไซต์บน Joomla 3 คือส่วนขยายที่เรียกว่า Top of the Page
ใน CMS นี้ ปลั๊กอินใดๆ สามารถติดตั้งผ่าน "ตัวจัดการส่วนขยาย" สำหรับสิ่งนี้คุณต้อง:
- ดาวน์โหลดปลั๊กอินบนอินเทอร์เน็ต
- คลิกที่ปุ่ม "เรียกดู" ในตัวจัดการส่วนขยาย
- เลือกไฟล์เก็บถาวรที่ดาวน์โหลด
- คลิก "ดาวน์โหลด" และติดตั้ง
ตอนนี้คุณต้องเปิดใช้งานใน "ตัวจัดการปลั๊กอิน" สำหรับสิ่งนี้คุณต้องไปที่ส่วนนี้ ค้นหาปลั๊กอินและเปลี่ยนสถานะเป็น "เปิดใช้งาน"
ขั้นตอนต่อไปคือการกำหนดค่าพารามิเตอร์ส่วนขยายทั้งหมดโดยใช้ส่วนเดียวกันซึ่งคุณต้องค้นหา "พารามิเตอร์พื้นฐาน" ของปลั๊กอินนี้ทางด้านขวา
ด้านบนของหน้ามีฟังก์ชันดังต่อไปนี้:
- เรียกใช้ใน/ ผู้ดูแลระบบ - เปิดใช้งานตัวเลือกนี้ไม่เพียงแต่บนทรัพยากรอินเทอร์เน็ต แต่ยังรวมถึงในแผง Joomla CMS ด้วย
- ปุ่มเปิดเผยตำแหน่ง - จำนวนพิกเซลที่ผู้ใช้ต้องกรอกลับเพื่อให้ปุ่มขึ้นปรากฏขึ้น
- ละเว้นข้อความปุ่ม - การแสดงข้อความบนปุ่ม
- อยู่ที่ด้านบนเสมอ - หน้าเว็บไซต์จะแสดงจากด้านบนเสมอ เมื่อใช้จุดยึดเพื่อเลื่อนไปยังตำแหน่งเฉพาะบนหน้า ไม่จำเป็นต้องเปิดใช้งานตัวเลือกนี้
- Smooth Scroll - ทำให้การเลื่อนหน้าราบรื่นขึ้น
- Scroll Duration - เวลาหลังจากนั้นเพจจะย้ายไปจุดเริ่มต้นโดยสมบูรณ์
- เลื่อนการเลื่อน - เพิ่มเอฟเฟกต์ภาพในการเลื่อน
- Transition Easing - "อ่อนตัว" การเคลื่อนไหวไปที่ด้านบนสุดของหน้า
- Link Location - ตำแหน่งของไอคอน โดยค่าเริ่มต้น ปุ่มจะอยู่ที่มุมล่างขวา
- ใช้สไตล์ – สไตล์ปุ่มแต่ละปุ่ม ซึ่งสามารถตั้งค่าในช่องด้านล่าง หากเปลี่ยนเป็นค่าลบ การตั้งค่าสไตล์ทั้งหมดจะถูกนำออกจากธีมที่ใช้งานของเว็บไซต์
- รูปแบบลิงก์ - ช่องสำหรับป้อนพารามิเตอร์ลักษณะปุ่ม
ในการปรับแต่งรูปแบบของปุ่ม "ขึ้น" คุณต้องมีอย่างน้อยที่สุดความรู้ คสช. มิฉะนั้น คุณควรเปลี่ยนค่าของพารามิเตอร์สุดท้ายเป็น "ไม่"
ความแตกต่างที่สำคัญอีกอย่างหนึ่งคือจารึกปกติบนไอคอนมีข้อความภาษาอังกฤษ: กลับไปด้านบน ข้อความดังกล่าวไม่สามารถแสดงบนไซต์ภาษารัสเซียได้ ดังนั้นคุณควรปิดการใช้งานในพารามิเตอร์ของปลั๊กอินหรือเปลี่ยนเป็นภาษารัสเซีย
ในการเปลี่ยนคำจารึกนี้ คุณต้องไปที่เซิร์ฟเวอร์ของไซต์โดยใช้ FTP หรือตัวจัดการไฟล์ในโฮสต์ ถัดไป ในไดเรกทอรี "/administrator/language/en-GB/" คุณต้องค้นหาไฟล์ชื่อ "en-GB.plg_system_topofthepage.ini"
ก่อนเปลี่ยนข้อความ คุณควรเปลี่ยนการเข้ารหัสของเอกสารนี้เป็น UTF-8 ซึ่งจะทำให้การแสดงตัวอักษรรัสเซียตามปกติ
ต่อไปเราจะพบบรรทัดต่อไปนี้:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="กลับไปด้านบน"" |
และเปลี่ยนวลีในเครื่องหมายคำพูดเป็นภาษารัสเซีย คุณสามารถใช้วลีเช่น "Up!", "To the top!" หรือ “ขึ้น!”.
ในตอนท้าย คุณจะต้องบันทึกไฟล์ที่แก้ไขและมองหาปุ่ม "ขึ้น" สำหรับเว็บไซต์ใน Joomla
ปุ่มขึ้นสำหรับ Ucoz
ปุ่ม "ขึ้น" สำหรับไซต์บน Ucoz จะต้องทำโดยใช้การแทรกโค้ด เนื่องจากไม่สามารถเชื่อมต่อปลั๊กอินสำหรับ CMS นี้ได้ อย่างไรก็ตาม ไม่จำเป็นต้องศึกษาไฟล์ระบบเป็นเวลานาน และค้นหาบรรทัดที่จำเป็น คุณเพียงแค่วางโค้ดขนาดเล็กในตำแหน่งที่ถูกต้อง
เพื่อติดตั้งเราจำเป็นต้องใช้:
- ไปที่ "แผงควบคุม -> การออกแบบ -> การจัดการการออกแบบ (เทมเพลต) -> ด้านล่างของไซต์;
- แทรกสคริปต์ (สามารถพบได้บนเว็บไซต์อย่างเป็นทางการของโครงการและแหล่งข้อมูลบุคคลที่สาม)
สรุป
หลังจากนั้น ไอคอนจะปรากฏขึ้นที่มุมล่างขวา โดยย้ายผู้ใช้ไปที่ด้านบนสุดของหน้า
อย่างที่คุณเห็น การตั้งค่าปุ่มย้อนกลับสำหรับ CMS ใดๆ ก็ไม่ได้ยากเป็นพิเศษ คุณสามารถใช้ทั้งวิธีการติดตั้งอัตโนมัติ (ปลั๊กอิน) และแบบแมนนวล อย่างไรก็ตาม ตัวเลือกหลังยังคงเหมาะสมที่สุด เนื่องจากไม่ส่งผลเสียต่อประสิทธิภาพของเว็บไซต์
คุณสามารถใช้ปุ่ม "กลับไปด้านบน" สำหรับไซต์ HTML เพื่อลดการใช้ทรัพยากรของไซต์ เนื่องจากส่วนขยายจำนวนมากสามารถส่งผลเสียต่อประสิทธิภาพของทรัพยากร ปลั๊กอินปุ่ม "ขึ้น" หนึ่งปุ่มจะไม่สามารถส่งผลกระทบอย่างมากต่อเวลาในการโหลดของหน้าเว็บไซต์ แต่ในกรณีส่วนใหญ่ ผู้ใช้มีปลั๊กอินอย่างน้อยหนึ่งโหลที่ติดตั้งบน CMS ในกรณีนี้ ปลั๊กอินใดๆ อาจส่งผลเสียต่อประสิทธิภาพของหน้าเว็บไซต์
