Home-theater-designers
ปุ่ม 'เลื่อนไปด้านบน' ใช้เพื่อคืนมุมมองของคุณไปที่ด้านบนสุดของหน้าได้อย่างง่ายดาย คุณลักษณะ UX เล็กน้อยนี้พบได้ทั่วไปในเว็บไซต์สมัยใหม่ มีประโยชน์อย่างยิ่งสำหรับหน้าเว็บที่มีเนื้อหาจำนวนมาก เช่น แอปพลิเคชันหน้าเดียว
วิธีแก้จอดำมรณะ
ในบทความนี้ คุณจะได้เรียนรู้วิธีสร้างปุ่มเลื่อนไปด้านบนโดยใช้ JavaScript และ jQuery
วิธีสร้างปุ่มเลื่อนขึ้นบนโดยใช้ JavaScript
คุณสามารถเพิ่มปุ่มเลื่อนขึ้นบนบนเว็บไซต์ของคุณโดยใช้ข้อมูลโค้ดต่อไปนี้:
โค้ด HTML
Scroll-to-Top button using JavaScript
Scroll down the page
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
ที่นี่ โครงสร้างพื้นฐานของหน้าเว็บจะถูกสร้างขึ้นด้วยข้อมูลจำลอง คุณต้องโฟกัสที่ปุ่มเลื่อนขึ้นด้านบนเท่านั้น
เมื่อคลิกปุ่มนี้ หน้าจะเลื่อนไปด้านบน สิ่งนี้จะใช้งานได้หลังจากเพิ่มรหัส jQuery
รหัส jQuery
ที่เกี่ยวข้อง: เรียนรู้วิธีสร้างองค์ประกอบใน jQuery
// ===== Scroll to Top ====
var btn = $('#button');
// If the page is scrolled more than 300px,
// show the scroll-to-top button
// Otherwise hide the button
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass('show');
} else {
btn.removeClass('show');
}
});
btn.on('click', function(e) {
e.preventDefault();
$('html, body').animate({scrollTop:0}, '300');
});ที่นี่ แสดง คลาสจะถูกเพิ่มไปยังองค์ประกอบปุ่มหากผู้ใช้เลื่อนหน้าเว็บมากกว่า 300 พิกเซล นี้ แสดง คลาสทำให้องค์ประกอบปุ่มมองเห็นได้ โดยค่าเริ่มต้น การมองเห็นองค์ประกอบปุ่มจะถูกซ่อนไว้ รายละเอียดเพิ่มเติมเกี่ยวกับปุ่มอยู่ในโค้ด CSS ต่อไปนี้
CSS Code
ที่เกี่ยวข้อง: ตัวอย่างโค้ด CSS อย่างง่ายที่คุณเรียนรู้ได้ใน 10 นาที
#button {
display: inline-block;
background-color: #FF9800;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s,
opacity .5s, visibility .5s;
opacity: 0;
visibility: hidden;
z-index: 1000;
}
#button::after {
content: 'f077';
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
font-size: 2em;
line-height: 50px;
color: #fff;
}
#button:hover {
cursor: pointer;
background-color: #333;
}
#button:active {
background-color: #555;
}
#button.show {
opacity: 1;
visibility: visible;
}
/* Styles for the content section */
.content {
width: 77%;
margin: 50px auto;
font-family: 'Merriweather', serif;
font-size: 17px;
color: #6c767a;
line-height: 1.9;
}
@media (min-width: 500px) {
.content {
width: 43%;
}
#button {
margin: 30px;
}
}
.content h1 {
margin-bottom: -10px;
color: #03a9f4;
line-height: 1.5;
}
.content h3 {
font-style: italic;
color: #96a2a7;
}CSS ด้านบนใช้เพื่อจัดรูปแบบปุ่มเลื่อนไปด้านบนและหน้าเว็บ คุณสามารถเล่นกับโค้ด CSS และจัดรูปแบบปุ่มตามความต้องการของคุณ
ตอนนี้คุณมีปุ่มเลื่อนขึ้นบน / กลับด้านบนที่ใช้งานได้อย่างสมบูรณ์ หากคุณต้องการดูซอร์สโค้ดที่สมบูรณ์ที่ใช้ในบทความนี้ นี่คือ ที่เก็บ GitHub ของเดียวกัน.
บันทึก : รหัสที่ใช้ในบทความนี้คือ MIT ได้รับใบอนุญาต .
เรียนรู้เพิ่มเติมเกี่ยวกับประสบการณ์ผู้ใช้
ประสบการณ์ของผู้ใช้มุ่งเน้นไปที่ว่าผลิตภัณฑ์ตอบสนองความต้องการของผู้ใช้หรือไม่ หากคุณเป็นนักออกแบบหรือนักพัฒนา คุณควรปฏิบัติตามหลักการออกแบบ UX และสร้างผลิตภัณฑ์ที่ยอดเยี่ยม หากคุณสนใจฟิลด์นี้ คุณต้องปฏิบัติตามเส้นทางที่ถูกต้องเพื่อเริ่มต้น
ลงชื่อเข้าใช้ icloud บน iphone ไม่ได้แบ่งปัน แบ่งปัน ทวีต อีเมล ต้องการเป็นนักออกแบบ UX หรือไม่? นี่คือวิธีการเริ่มต้น
เป็นหน้าที่ของ UX Designer ที่จะต้องดูแลความต้องการของผู้ใช้ซอฟต์แวร์และมีความยินดีในกระบวนการนี้
อ่านต่อไป หัวข้อที่เกี่ยวข้อง- การเขียนโปรแกรม
- JavaScript
- jQuery
Yuvraj เป็นนักศึกษาระดับปริญญาตรีสาขาวิทยาการคอมพิวเตอร์ที่มหาวิทยาลัยเดลี ประเทศอินเดีย เขาหลงใหลเกี่ยวกับ Full Stack Web Development เมื่อไม่ได้เขียน เขากำลังสำรวจความลึกของเทคโนโลยีต่างๆ
เพิ่มเติมจาก Yuvraj Chandraสมัครรับจดหมายข่าวของเรา
เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!
คลิกที่นี่เพื่อสมัครสมาชิก