ปุ่ม "ขึ้น" สำหรับไซต์: จะทำอย่างไร

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

มีไว้เพื่ออะไร?

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

ประโยชน์สำหรับผู้เยี่ยมชม

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

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

การใช้ปุ่มเพื่อเลื่อนไปด้านบนสุดของหน้าทำให้การเรียกดูไซต์สะดวกยิ่งขึ้น

ประโยชน์สำหรับทรัพยากรอินเทอร์เน็ต

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

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

วิธีทำให้ปุ่ม "up" บนเว็บไซต์ของคุณเอง

เราเข้าใจเพิ่มเติม ปุ่มเลื่อนขึ้นสำหรับไซต์บน CMS ใด ๆ สามารถทำได้โดยอิสระโดยทำตามขั้นตอนง่าย ๆ สองสามขั้นตอน

การสร้างภาพ
การสร้างสคริปต์
การสร้างรูปแบบปุ่ม
เพิ่มไปยังเว็บไซต์

รูปปุ่ม

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

เพื่อปรับปรุงลักษณะที่ปรากฏของปุ่มมีความจำเป็นต้องทำการปรับปรุงบางอย่างเช่นทำให้สไปรต์อนุญาตให้ใช้ภาพพื้นหลังผสาน CSS ซึ่งสร้างภาพเคลื่อนไหว

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

หากต้องการเริ่มทำงานในหน้าต่างแก้ไขที่ปรากฏขึ้นให้เลือกช่อง“ โหลดภาพจากคอมพิวเตอร์” ตัวอย่างเช่นถ่ายภาพจรวด

หากขนาดของไอคอนที่เลือกมีขนาดใหญ่เกินไปจำเป็นต้องทำการปรับขนาดเล็ก ในการทำเช่นนี้ไปที่เมนูด้านบนและเลือกฟิลด์ "แก้ไข" และหลังจาก "แปลงฟรี ...

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

ขั้นตอนต่อไปคือการสร้างสำเนาของเลเยอร์

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

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

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

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

หากต้องการบันทึกคุณต้องคลิกที่ "ไฟล์" -“ บันทึก” ซึ่งในรายการด้านซ้าย“ คอมพิวเตอร์ของฉัน” เราเขียนชื่อของภาพ (เฉพาะโครงร่างภาษาอังกฤษ) เลือกรูปแบบ (ในกรณีนี้คือ PNG) และคลิกปุ่ม“ ใช่”

ไฟล์ด้วยสคริปต์ปุ่มขึ้น

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

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

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

ติดตั้งบนเว็บไซต์

ในการตั้งค่าปุ่มเลื่อนสำหรับเว็บไซต์คุณต้องวางรหัสในตำแหน่งที่ต้องการ คุณต้องป้อนก่อนแท็ก </ body>

การสร้างรูปแบบปุ่มใน CSS

ส่วนใหญ่ปุ่ม "up" สำหรับเว็บไซต์จะอยู่ที่ด้านล่าง ("ห้องใต้ดิน")

ควรป้อนรหัสต่อไปนี้ลงในไฟล์ style.css ของไซต์:

"/ * ปุ่มขึ้น * /

.scrollTop {
พื้นหลัง: url ("images / up.png") 0 0 ไม่ซ้ำ; / * เส้นทางภาพที่เกี่ยวข้อง * /
ความกว้าง: 39px; / * ความกว้างของปุ่ม * /
ความสูง: 96px; / * 50% ของความสูงของปุ่ม * /
bottom: 5px; / * ที่ตำแหน่งคงที่เยื้องด้านล่าง * /
ซ้าย: 89%; / * เลื่อนไปทางซ้าย * /
}
.scrollTop: โฮเวอร์ {background-position: 0 -108px; } / * ชดเชยพื้นหลัง * / "

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

ปุ่ม Wordpress Up สำหรับเว็บไซต์ Wordpress

สำหรับ CMS นี้ปุ่ม“ ขึ้น” สามารถทำได้โดยใช้ปลั๊กอินเช่นเดียวกับอิสระ

วิธีที่มีปลั๊กอินเป็นวิธีที่สะดวกและง่ายที่สุดในการติดตั้งเช่นนี้คุณเพียงแค่คลิกที่ปุ่มติดตั้งและกำหนดค่าฟังก์ชั่นทั้งหมดในเมนูปลั๊กอิน

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

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

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

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

Knock Up สำหรับ Joomla

Joomla CMS ยังรองรับการติดตั้งปลั๊กอินเช่นเดียวกับ Wordpress ตัวเลือกที่ประสบความสำเร็จมากที่สุดสำหรับปุ่ม up สำหรับเว็บไซต์ Joomla 3 คือส่วนเสริมที่เรียกว่า Top of the Page

ใน CMS นี้ปลั๊กอินใด ๆ สามารถติดตั้งผ่าน "ตัวจัดการส่วนขยาย" สำหรับสิ่งนี้คุณต้องการ:

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

ตอนนี้คุณต้องเปิดใช้งานใน "ตัวจัดการปลั๊กอิน" ในการทำสิ่งนี้ไปที่ส่วนนี้ค้นหาปลั๊กอินและเปลี่ยนสถานะเป็น "เปิด"

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

ด้านบนของหน้ามีฟังก์ชั่นต่อไปนี้:

เรียกใช้ใน / ผู้ดูแลระบบ - เปิดใช้งานตัวเลือกไม่เพียง แต่ในทรัพยากรอินเทอร์เน็ต แต่ยังอยู่ในแผง CMS CMS ของตัวเอง
ตำแหน่งการเปิดเผยปุ่ม - จำนวนพิกเซลที่ผู้ใช้ต้องคลายเพื่อให้ปุ่มขึ้นปรากฏ
Omit Button Text - การมีอยู่ของข้อความบนปุ่ม
Always at Top - หน้าเว็บไซต์จะแสดงตลอดเวลาตั้งแต่เริ่มต้น เมื่อใช้จุดยึดเพื่อเลื่อนไปยังตำแหน่งเฉพาะบนหน้าตัวเลือกนี้ไม่จำเป็นต้องเปิดใช้งาน
Smooth Scroll - ทำให้การเลื่อนหน้าราบรื่นขึ้น
Scroll Duration - เวลาหลังจากที่หน้าถูกย้ายไปยังจุดเริ่มต้นอย่างสมบูรณ์
Scroll Transition - เพิ่มเอฟเฟกต์ภาพเลื่อนขนาดใหญ่
การเปลี่ยนการทำให้ง่ายขึ้น -“ ผ่อนคลาย” ย้ายไปที่ด้านบนของหน้า
Link Location - ตำแหน่งของไอคอน ตามมาตรฐานปุ่มจะอยู่ที่มุมขวาล่าง
ใช้สไตล์เป็นลักษณะปุ่มแต่ละปุ่มที่สามารถตั้งค่าในฟิลด์ด้านล่าง หากเปลี่ยนเป็นค่าลบพารามิเตอร์สไตล์ทั้งหมดจะถูกนำมาจากธีมที่ใช้งานของไซต์
Link Style - ฟิลด์สำหรับป้อนพารามิเตอร์สไตล์ปุ่มของคุณเอง

ในการปรับสไตล์ของปุ่ม "ขึ้น" ด้วยตนเองคุณต้องมีความรู้เกี่ยวกับ CCS อย่างน้อยที่สุด มิฉะนั้นจำเป็นต้องเปลี่ยนค่าของพารามิเตอร์ penultimate เป็น "ไม่"

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

หากต้องการเปลี่ยนจารึกนี้คุณต้องไปที่เซิร์ฟเวอร์ไซต์ที่ใช้ FTP หรือตัวจัดการไฟล์ที่ฝังอยู่ในโฮสติ้ง ถัดไปในไดเรกทอรี“ / administrator / language / en-GB /” คุณต้องค้นหาไฟล์ชื่อ“ en-GB.plg_system_topofthepage.ini”

ก่อนที่จะเปลี่ยนข้อความให้เปลี่ยนการเข้ารหัสของเอกสารนี้เป็น utf-8 สิ่งนี้จะทำให้ตัวอักษรรัสเซียแสดงตามปกติ

ต่อไปเราจะพบบรรทัดนี้:

"PLG_SYS_TOPOFTHEPAGE_GOTOTOP =" กลับไปด้านบน ""

และเปลี่ยนวลีในเครื่องหมายคำพูดเป็นภาษารัสเซีย คุณสามารถใช้วลีเช่น“ Up!”,“ Top!” หรือ“ Up!”

ในที่สุดคุณจะต้องบันทึกไฟล์ที่แก้ไขแล้วและตรวจสอบปุ่ม "up" สำหรับเว็บไซต์ Joomla

ปุ่มขึ้น Ucoz

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

สำหรับการติดตั้งเราจะต้อง:

ไปที่ "แผงควบคุม -> การออกแบบ -> การจัดการการออกแบบ (แม่แบบ) -> ด้านล่างของเว็บไซต์;
แทรกสคริปต์ (สามารถพบได้บนเว็บไซต์ทางการของโครงการและแหล่งข้อมูลบุคคลที่สาม)

ข้อสรุป

หลังจากนั้นไอคอนจะปรากฏที่มุมขวาล่างย้ายผู้ใช้ไปยังด้านบนสุดของหน้า

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

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

</ p>>