Home-theater-designers
आपके दृश्य को पृष्ठ के शीर्ष पर आसानी से वापस लाने के लिए 'स्क्रॉल-टू-टॉप' बटन का उपयोग किया जाता है। आधुनिक वेबसाइटों में यह छोटी UX सुविधा बहुत आम है। यह उन वेब पेजों के लिए विशेष रूप से सहायक है जिनमें बहुत सारी सामग्री है, जैसे सिंगल-पेज एप्लिकेशन।
एक लेख प्रकाशित होने की तारीख कैसे पता करें
इस लेख में, आप सीखेंगे कि जावास्क्रिप्ट और jQuery का उपयोग करके स्क्रॉल-टू-टॉप बटन कैसे बनाया जाता है।
जावास्क्रिप्ट का उपयोग करके स्क्रॉल-टू-टॉप बटन कैसे बनाएं
आप निम्न कोड स्निपेट का उपयोग करके अपनी वेबसाइट पर स्क्रॉल-टू-टॉप बटन जोड़ सकते हैं:
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 पिक्सल से अधिक स्क्रॉल करता है तो क्लास बटन तत्व में जोड़ा जाता है। इस प्रदर्शन वर्ग बटन तत्व को दृश्यमान बनाता है। डिफ़ॉल्ट रूप से, बटन तत्व की दृश्यता छिपी रहती है। बटन के बारे में अधिक जानकारी निम्नलिखित सीएसएस कोड में है।
सीएसएस कोड
सम्बंधित: सरल सीएसएस कोड उदाहरण जो आप १० मिनट में सीख सकते हैं
#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 का उपयोग स्क्रॉल-टू-टॉप बटन और वेब पेज को स्टाइल करने के लिए किया जाता है। आप सीएसएस कोड के साथ खेल सकते हैं और अपनी आवश्यकताओं के अनुसार बटन को स्टाइल कर सकते हैं।
अब आपके पास पूरी तरह कार्यात्मक स्क्रॉल-टू-टॉप / बैक-टू-टॉप बटन है। यदि आप इस लेख में उपयोग किए गए संपूर्ण स्रोत कोड को देखना चाहते हैं, तो यह है गिटहब भंडार समान।
ध्यान दें : इस लेख में प्रयुक्त कोड है एमआईटी लाइसेंस प्राप्त .
उपयोगकर्ता अनुभव के बारे में अधिक जानें
उपयोगकर्ता अनुभव इस बात पर केंद्रित है कि कोई उत्पाद अपने उपयोगकर्ताओं की जरूरतों को पूरा करता है या नहीं। यदि आप एक डिज़ाइनर या डेवलपर हैं, तो आपके लिए अच्छा होगा कि आप UX डिज़ाइन सिद्धांतों का पालन करें और बढ़िया उत्पाद बनाएँ। यदि इस क्षेत्र में आपकी रुचि है, तो आरंभ करने के लिए आपको सही मार्ग का अनुसरण करना चाहिए।
रिबूट करें और उचित बूट डिवाइस चुनें विंडोज़ 10साझा करना साझा करना कलरव ईमेल UX डिज़ाइनर बनना चाहते हैं? यहां बताया गया है कि कैसे शुरू करें
यह सुनिश्चित करना UX डिज़ाइनर का काम है कि सॉफ़्टवेयर उपयोगकर्ता की ज़रूरतों का ध्यान रखा जाए और वे इस प्रक्रिया से खुश हों।
आगे पढ़िए संबंधित विषय- प्रोग्रामिंग
- जावास्क्रिप्ट
- jQuery
युवराज दिल्ली विश्वविद्यालय, भारत में कंप्यूटर विज्ञान के स्नातक छात्र हैं। उन्हें फुल स्टैक वेब डेवलपमेंट का शौक है। जब वह नहीं लिख रहा होता है, तो वह विभिन्न तकनीकों की गहराई की खोज कर रहा होता है।
युवराज चंद्र की अन्य फ़िल्में-टीवी शोहमारे न्यूज़लेटर की सदस्यता लें
तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!
सब्सक्राइब करने के लिए यहां क्लिक करें