ปุ่มปรับขึ้น การเปลี่ยนภาพเคลื่อนไหวไปที่ด้านบนของหน้า

โอ้คน ๆ หนึ่งคุ้นเคยกับความสะดวกสบายได้เร็วแค่ไหนไม่ว่าเขาจะอยู่ที่ไหน: ที่บ้านหรือบนเว็บไซต์! ฉันไม่รู้เกี่ยวกับคุณ แต่ฉันคุ้นเคยกับการใช้ปุ่ม "กลับสู่ด้านบน" และสะดวกเป็นพิเศษเมื่อบทความมีขนาดใหญ่
ดังนั้น ในบทความนี้ ฉันจะบอกวิธีสร้างปุ่ม "กลับสู่ด้านบน" สำหรับเว็บไซต์โดยใช้ไลบรารี jQuery

1. มาเชื่อมต่อไลบรารี jQuery กัน โดยวิธีการที่ฉันเขียนเกี่ยวกับเรื่องนี้เมื่อเร็ว ๆ นี้
เพิ่มระหว่างแท็ก... รหัสนี้:

2. เพิ่มปุ่มลิงก์ "กลับสู่ด้านบน" ระหว่างแท็ก:

ขึ้นไปด้านบน

และทันทีหลังจากปุ่ม "กลับสู่ด้านบน" ให้เพิ่มโค้ด JavaScript:

$(function() ( $(window).scroll(function() ( if($(this).scrollTop()>100) $("a#move_up").fadeIn(); else $("a#move_up" ").fadeOut(400); )); $("a#move_up").click(function())( $("body,html").animate((scrollTop: 0), 450); return false; ) ));

ให้ความสนใจกับบรรทัดที่ 6 มีตัวเลข 100 - ระบุจำนวนคำที่ปุ่ม "กลับสู่ด้านบน" ควรปรากฏขึ้น คุณสามารถระบุหมายเลขอื่นที่เหมาะกับคุณได้
ในบรรทัดที่ 11 มีตัวเลข 450 - ระบุความเร็วในการเพิ่มหน้า คุณยังสามารถระบุหมายเลขของคุณได้ ยิ่งตัวเลขสูง หน้าเว็บก็จะขึ้นไปด้านบนช้าลงเท่านั้น

3. ตอนนี้เพิ่มโค้ด CSS ใครไม่รู้วิธีเชื่อมต่อ CSS ด้วย ไฟล์ HTMLอ่านเกี่ยวกับเรื่องนี้ได้ที่นี่

A#move_up ( position:fixed; /* ตำแหน่งบล็อกคงที่*/ top:8px; right:20px; width:56px; height:20px; display:none; text-align:center; Font:12px Arial,Verdana,sans- serif; พื้นหลัง:#3366ff; /*opacity:0.7; border-radius:none; #move_up:hover (ความทึบ:0.9; ตัวกรอง: alpha(opacity=90); )

นั่นคือทั้งหมดที่ นี่คือลักษณะของโค้ดที่เสร็จสมบูรณ์:

a#move_up( ตำแหน่ง:คงที่; /* ตำแหน่งบล็อกคงที่*/ top:8px; ขวา:20px; ความกว้าง:56px; ความสูง:20px; จอแสดงผล:none; text-align:center; แบบอักษร:12px Arial,Verdana,sans- serif; background:#3366ff; /*opacity:0.7; border-radius: none;) #move_up:hover( opacity:0.9; filter: alpha(opacity=90);) ข้อความของคุณ (ควรมีข้อความมากกว่านี้) ไปที่ด้านบนสุด (function() ( $(window).scroll(function() ( if($(this) .scrollTop()>100) $("a#move_up").fadeIn(); else $("a#move_up" ).fadeOut(400 )); ()( $("body,html").animate((scrollTop: 0), 50); return false; ));

ตอนนี้ เมื่อคุณเลื่อนหน้าลง บล็อกโปร่งแสงสีน้ำเงินเล็กๆ จะปรากฏขึ้นพร้อมข้อความว่า "ด้านบน"

ขอให้เป็นวันที่ดีผู้เยี่ยมชม / สมาชิกเว็บไซต์ของฉัน!

ในบทความนี้ผมอยากจะเล่า/แสดง วิธีสร้างปุ่มบน/ล่างสำหรับไซต์โดยไม่ต้องใช้ปลั๊กอินที่ไม่จำเป็น

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

ฉันจะพยายามอธิบายให้มากที่สุดเท่าที่จะเป็นไปได้ด้วยวิธีที่ง่ายกว่าเพื่อให้คุณไม่มีคำถามใด ๆ ฉันจะพยายามเขียนรายละเอียดเพิ่มเติมว่าโค้ด / สคริปต์ใด (html, css, JavaScript) และตำแหน่งที่ต้องแทรกในนั้น สั่งให้ทุกอย่างทำงานเพื่อคุณ

ก่อนอื่น ฉันอยากจะบอกคุณว่าทำไมคุณต้องใส่ปุ่ม To Top บนเว็บไซต์:

• ประการแรก นี่เป็นเพื่อความสะดวกของคุณและผู้เยี่ยมชมของคุณ

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

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

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

การออกแบบไซต์ยังรวมถึงขนาดและตำแหน่งของปุ่มบน/บนสุดด้วย

ขนาด - ทำให้กระดุมไม่เล็กและไม่ใหญ่จนเกินไป - เหมาะสม...

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

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

ฉันรีบเร่งให้คุณพอใจที่จะนำเสนอด้านล่างนี้ 2 วิธีในการติดตั้งปุ่ม Top/To Topบนเว็บไซต์ - วิธีหนึ่งนั้นง่ายมากส่วนอีกวิธีนั้นยากกว่าเล็กน้อย - ในแง่ของการนำไปปฏิบัติ แต่ต้องติดตาม ขั้นตอนง่ายๆทุกอย่างจะได้ผล ไม่ต้องสงสัยเลย

ก่อนอื่นเรามาดูภาพของปุ่ม To Top กันก่อน

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

ดังนั้นผู้อ่านที่รัก ฉันจะมาช่วยเหลือด้วยรูปภาพสำหรับปุ่ม To Top ในเวอร์ชันของฉันเอง ง่ายๆ เพียงเห็นแวบแรก

หากต้องการคัดลอกรูปภาพไปยังคอมพิวเตอร์ของคุณ คลิกขวาและเลือก “ บันทึกภาพเป็น..." หรือ " บันทึกภาพเป็น...».

ตัวอย่าง: http:// my-site.ru/wp-content/ธีม/ topic_name/ภาพ/ name_picture.png

ฉันหวังว่าคุณจะรู้วิธีเข้าไปในโฟลเดอร์ที่รู้จัก public_htmlแต่หากมีบางอย่างไม่เหมาะกับคุณ โปรดติดต่อฉันในความคิดเห็น...

ไปกันเลย แผงการบริหารของไซต์(แผงผู้ดูแลระบบ) -> รูปร่าง -> วิดเจ็ต.

ลากวิดเจ็ต " ไปที่แถบด้านข้างขวา (หรือแถบด้านข้างอื่นๆ) ข้อความ- เปิดและป้อนรหัส html ต่อไปนี้:

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

เอาล่ะ มาตั้งค่าสไตล์ของปุ่มกัน โดยไปที่ แผงผู้ดูแลระบบไซต์ -> รูปร่าง -> บรรณาธิการ(ไฟล์ สไตล์.css) และที่ส่วนท้ายสุดให้ใส่โค้ดต่อไปนี้:

ก.naverx (
ตำแหน่ง:คงที่;
ด้านล่าง : 70px;
ขอบซ้าย : 1020px;
ขวา :5px;
พื้นหลัง : #417297 url (http://site/wp-content/themes/pressa/images/nawerx.png) ตรงกลาง ไม่ทำซ้ำ;
ความกว้าง: 32px;
ความสูง: 32px;
รัศมีเส้นขอบ: 5px;
-moz-border-รัศมี : 5px;
-webkit-ขอบรัศมี : 5px;
-o-border-รัศมี : 5px;
เคอร์เซอร์: ตัวชี้;
ช่องว่างภายใน: 15px;
ระยะขอบ : 20px;
ความทึบ: 0.8;
กล่องเงา : สิ่งที่ใส่เข้าไป 0 1px 0 rgba (255,255,255,0.5), 0 2px 2px rgba (0,0,0,0.3), 0 0 4px 1px rgba (0,0,0,0.2);
-webkit-transition: ความสะดวกทั้งหมด 0.2s 0.01s;
}

ก .naverx :โฮเวอร์ (
พื้นหลัง : #F0824F url (http://site/wp-content/themes/pressa/images/nawerx.png) กึ่งกลาง ไม่ทำซ้ำ;
กล่องเงา : ไม่มี !สำคัญ ;
ความทึบ: 1;
}

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

อย่าลืมบันทึกการตั้งค่าทั้งหมด อัปเดตหน้าไซต์ และหากทุกอย่างถูกต้องแล้ว ปุ่ม To Top ควรปรากฏบนไซต์ของคุณ

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

ทางด้านขวามือค้นหาสไตล์” ก.naverx"และในพารามิเตอร์ พื้นหลังคลิกที่สี่เหลี่ยมที่มีสีของปุ่ม

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

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

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

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

คุณมีรูปภาพ (ดูด้านบน) จากนั้นคุณต้องไปที่ไฟล์ ด้านล่าง.php (รูปร่าง -> บรรณาธิการ) ให้ค้นหาแท็กปิดที่นั่น และก่อนที่จะแทรกโค้ดต่อไปนี้จากสคริปต์ปุ่ม To Top:

$(function ()($.fn.scrollToTop=function ()($(this).hide ().removeAttr ("href");if ($(window).scrollTop ()!="0")($ (this).fadeIn("slow"))var scrollDiv=$(this);$(window).scroll (function ()(if ($(window).scrollTop ()=="0")($(scrollDiv) ).fadeOut("slow"))else($(scrollDiv).fadeIn("slow")));$(this).click (function ()($("html, body").animate ((scrollTop : 0),"ช้า"))))));

//

เราบันทึกจากนั้นไปที่ไฟล์ สไตล์.cssให้คัดลอกโค้ดสไตล์ด้านบน (a .naverx , a .naverx :hover ) วางโค้ดและบันทึกการเปลี่ยนแปลง

ไปที่หน้าทรัพยากรของเรา อัปเดตหน้า และชื่นชมยินดีกับผลลัพธ์

ความสนใจ! โค้ด JavaScript ยังสามารถแทรกลงในไฟล์ได้ header.phpและในธีม WP ของฉันมันถูกตั้งค่าไว้ในไฟล์ theloop.php.

หากปุ่มโค้ด/อัปไม่ทำงานในไฟล์เดียว ให้ลองติดตั้งโค้ดสคริปต์ในไฟล์อื่น (จากรายการด้านบน) - มันจะใช้งานได้อย่างแน่นอน

ในรูปแบบของ .naverx พารามิเตอร์จะเป็น margin-left : 1020px;

— เปลี่ยนค่า (1020px) เพื่อวางตำแหน่งปุ่ม To Top/To Top/To Top ไปทางซ้ายหรือขวา

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

เพียงเท่านี้เพื่อนๆ อย่าลืมแวะมาเยี่ยมชมและแบ่งปันบทความให้เพื่อนๆ นะครับ ฉันยินดีรับคำถามและความคิดเห็น!

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

ปุ่มด้านบน: HTML+CSS

ข้อดีของวิธีนี้คือใช้งานง่าย (ไม่จำเป็นต้องใช้ไลบรารีหรือสคริปต์เพิ่มเติม)

ปุ่มด้านบนพร้อม CSS - "Nubex" .topNubex ( ตำแหน่ง: คงที่; ขวา: 45px; ด้านล่าง: 45px; ) ด้านบน

วิธีการด้านล่างใช้ไลบรารี JQuery ใช้งานง่ายและช่วยให้คุณเลื่อนหน้าได้อย่างราบรื่น

ปุ่มบนสุดที่ใช้ JavaScript - "Nubex" #topNubex ( ตำแหน่ง: คงที่; ขวา: 45px; ด้านล่าง: 45px; ) $(function() ( $(window).scroll(function() ( if($(this) .scrollTop( ) != 0) ( $("#topNubex").fadeIn(); ) else ( $("#topNubex").fadeOut(); ) )); $("#topNubex").คลิก( ฟังก์ชั่น() ($("body,html").animate((scrollTop:0),700); ));

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

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

บทความนี้จะประกอบด้วยส่วนต่างๆ ดังต่อไปนี้:

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

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

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

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

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

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

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

ก็จะเพียงพอต่อการนำไปปฏิบัติ ฟังก์ชั่นมาตรฐานภาษามาร์กอัป HTML เสริมด้วยสไตล์ CSS ปุ่มขึ้นจะทำหน้าที่เป็นลิงก์ปกติโดยส่งผู้เยี่ยมชมไปที่ด้านบนของหน้า

ข้อดี:

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

ข้อบกพร่อง:

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

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

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

ติดกระดุม ( width:88px; ความสูง:118px; ตำแหน่ง:คงที่; ด้านล่าง:20px; ขวา:50px; )

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

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

• ปุ่มจะไม่ปรากฏขึ้นต่อหน้าต่อตาคุณตลอดเวลา แต่จะปรากฏเฉพาะเมื่อผู้เยี่ยมชมเลื่อนหน้าลงเท่านั้น
• ผลของการกลับไปที่ด้านบนของหน้าจะราบรื่นซึ่งดูมีสไตล์
• นอกจากนี้ ปุ่มของเราจะเปลี่ยนเมื่อคุณวางเคอร์เซอร์ (เปลี่ยนสีหรือความสว่าง)

มีหลายวิธีและสคริปต์ที่ให้คุณสร้างปุ่มได้ ฉันยอมรับตามตรงว่าฉันไม่ใช่โปรแกรมเมอร์ และแม้ว่าฉันจะเข้าใจ HTML ในเวอร์ชันก่อนหน้า แต่ฉันเป็นมือใหม่ในด้าน JavaScript ฉันก็เลยดูและศึกษาหลายอย่าง รุ่นที่แตกต่างกันและเลือกตัวเลือกที่ใช้งานง่ายที่สุด (เปลี่ยนแปลงน้อยลงในไฟล์ต่างๆ)

โดยทั่วไปกระบวนการสร้างปุ่มดังกล่าวจะซับซ้อนกว่าเล็กน้อย แต่ใคร ๆ ก็สามารถเข้าใจได้ ทุกอย่างเสร็จสิ้นใน 2 ขั้นตอน:

หากคุณใช้ WordPress หรือ CMS มาตรฐานอื่น ไลบรารีนี้มักจะรวมไว้ตามค่าเริ่มต้น ในกรณีนี้ คุณสามารถข้ามจุดนี้ไปได้

ในการเชื่อมต่อไลบรารี jQuery คุณต้องเขียนบรรทัดต่อไปนี้ในส่วนของเว็บไซต์ของคุณ:

สามารถแทรกโค้ดสคริปต์ได้สองวิธี:

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

ตัวเลือกแรกนั้นง่ายกว่าตัวเลือกที่สองในความคิดของฉันสะดวกกว่า

jQuery(document).ready(function($)( $(""+ "..png) 0 0 no-repeat; )" + ".scrollTop:hover( ตำแหน่งพื้นหลัง:0 -133px;)" +"" ).appendTo("เนื้อหา"); ความเร็ว = 550, $scrollTop = $("

").appendTo("body"); $scrollTop.click(function(e)( e.preventDefault(); $("html:not(:animated),body:not(:animated)").animate(( scrollTop: 0), ความเร็ว); // ฟังก์ชั่นลักษณะที่ปรากฏ show_scrollTop())( ($(window).scrollTop() > 330) ? $scrollTop.fadeIn(700) : $scrollTop.fadeOut(700); ) $ (หน้าต่าง).scroll(function())( show_scrollTop(); ));

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

ฉันตั้งชื่อไฟล์ว่า buttonup.js เพื่อเชื่อมต่อให้เขียนบรรทัดต่อไปนี้ในส่วนหัวของไซต์: