कैसे एक "स्क्रॉल-टू-टॉप" जावास्क्रिप्ट और jQuery का उपयोग कर बटन

आपके दृश्य को पृष्ठ के शीर्ष पर आसानी से वापस लाने के लिए "स्क्रॉल-टू-टॉप" बटन का उपयोग किया जाता है। आधुनिक वेबसाइटों में यह छोटी UX सुविधा बहुत आम है। यह उन वेब पेजों के लिए विशेष रूप से सहायक है जिनमें बहुत सारी सामग्री है, जैसे सिंगल-पेज एप्लिकेशन।

इस लेख में, आप सीखेंगे कि जावास्क्रिप्ट और jQuery का उपयोग करके स्क्रॉल-टू-टॉप बटन कैसे बनाया जाता है।

जावास्क्रिप्ट का उपयोग करके स्क्रॉल-टू-टॉप बटन कैसे बनाएं

आप निम्न कोड स्निपेट का उपयोग करके अपनी वेबसाइट पर स्क्रॉल-टू-टॉप बटन जोड़ सकते हैं:

HTML कोड

 <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Scroll-to-Top button using JavaScript</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,700" rel="stylesheet">
<!-- BUTTON NEEDS FONT AWESOME FOR CHEVRON UP ICON, YOU CAN USE LATEST VERSION FOR MORE ICONS -->
<!-- https://www.bootstrapcdn.com/fontawesome/ -->
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body id="top">
<h1>
Scroll To Top
</h1>
<div class="long-text">
<p>Scroll down to see the button.</p>
<p>Click the button to see smooth scroll to top.</p>
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.<br><br>
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.<br><br>
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.<br><br>
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.<br><br>
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.<br><br>
</div>
<div id="scrolltop">
<a class="top-button" href="#top"><i class="icon-chevron-up"></i></a>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

यहां, वेबपेज की एक बुनियादी संरचना डमी डेटा के साथ बनाई गई है। आपको केवल स्क्रॉल-टू-टॉप बटन पर ध्यान केंद्रित करने की आवश्यकता है।

 <div id="scrolltop">
<a class="top-button" href="#top"><i class="icon-chevron-up"></i></a>
</div>

स्क्रॉल-टू-टॉप बटन #top आईडी का उपयोग करके पृष्ठ के शीर्ष पर इंगित करता है। #top <body> टैग की आईडी है। स्क्रॉल-टू-टॉप बटन का आइकन फॉन्ट कमाल का उपयोग करके बनाया गया है।

जावास्क्रिप्ट कोड

 // ===== Scroll to Top ====
const scrollTop = document.getElementById('scrolltop')
// When the page is loaded, hide the scroll-to-top button
window.onload = () => {
scrollTop.style.visibility = "hidden";
scrollTop.style.opacity = 0;
}
// If the page is scrolled more than 200px,
// display the scroll-to-top button
// Otherwise keep the button hidden
window.onscroll = () => {
if (window.scrollY > 200) {
scrollTop.style.visibility = "visible";
scrollTop.style.opacity = 1;
} else {
scrollTop.style.visibility = "hidden";
scrollTop.style.opacity = 0;
}
};

स्क्रॉल-टू-टॉप बटन निम्न स्थितियों के अनुसार प्रदर्शित और छिपा हुआ है:

  • जब पृष्ठ लोड होता है, तो स्क्रॉल-टू-टॉप बटन छिपा होता है।
  • स्क्रोल-टू-टॉप बटन को तब तक छिपाकर रखा जाता है जब तक कि पेज को 200 पिक्सल तक स्क्रॉल न कर दिया जाए। आप अपनी आवश्यकता के अनुसार पिक्सेल बदल सकते हैं।

सीएसएस कोड

संबंधित: CSS बॉक्स-छाया का उपयोग कैसे करें: ट्रिक्स और उदाहरण

 html {
scroll-behavior: smooth;
}
#scrolltop {
display: block;
visibility: visible;
opacity: 1;
transition: visibility 0s, opacity 0.5s ease-in;
position: fixed;
bottom: 20px;
right: 20px;
background: rgba(255, 255, 255, 0.4);
border-radius: 20%;
}
.top-button {
text-decoration: none;
cursor: pointer;
padding: 30px;
color: #222;
}
body {
background: linear-gradient(180deg, #0697f9 0%, #f898bf 100%);
color: #fff;
font-family: 'Quicksand', sans-serif;
font-size: 24px;
line-height: 1.4;
text-align: center;
padding: 40px;
}
.long-text {
max-width: 700px;
margin: 0 auto;
padding: 40px;
background: rgba(0, 0, 0, 0.2);
}

ऊपर दिए गए CSS का उपयोग स्क्रॉल-टू-टॉप बटन और वेब पेज को स्टाइल करने के लिए किया जाता है। आप सीएसएस के साथ खेल सकते हैं और अपनी आवश्यकता के अनुसार बटन को स्टाइल कर सकते हैं।

JQuery का उपयोग करके स्क्रॉल-टू-टॉप बटन कैसे बनाएं

आप निम्न कोड स्निपेट का उपयोग करके अपनी वेबसाइट पर स्क्रॉल-टू-टॉप बटन जोड़ सकते हैं:

HTML कोड

 <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Back to top button using jQuery</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather:400,900,900i" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<!-- Back to top button -->
<a id="button"></a>

<!-- Some content to fill up the page -->
<div class="content">
<h1>Back to Top Button</h1>
<h3>Scroll down the page</h3>
<p>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.
</p>
<p>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.
</p>
<p>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.
</p>
<p>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.
</p>
<p>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.
</p>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

यहां, वेबपेज की एक बुनियादी संरचना डमी डेटा के साथ बनाई गई है। आपको केवल स्क्रॉल-टू-टॉप बटन पर ध्यान केंद्रित करने की आवश्यकता है।

 <a id="button"></a>

जब यह बटन क्लिक किया जाता है, तो पृष्ठ शीर्ष पर स्क्रॉल हो जाता है। यह 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 का उपयोग स्क्रॉल-टू-टॉप बटन और वेब पेज को स्टाइल करने के लिए किया जाता है। आप सीएसएस कोड के साथ खेल सकते हैं और अपनी आवश्यकताओं के अनुसार बटन को स्टाइल कर सकते हैं।

अब आपके पास पूरी तरह कार्यात्मक स्क्रॉल-टू-टॉप / बैक-टू-टॉप बटन है। यदि आप इस लेख में उपयोग किए गए संपूर्ण स्रोत कोड पर एक नज़र डालना चाहते हैं, तो यहाँ उसी का GitHub रिपॉजिटरी है।

नोट : इस आलेख में प्रयुक्त कोड एमआईटी लाइसेंस प्राप्त है

उपयोगकर्ता अनुभव के बारे में अधिक जानें

उपयोगकर्ता अनुभव इस बात पर केंद्रित है कि कोई उत्पाद अपने उपयोगकर्ताओं की जरूरतों को पूरा करता है या नहीं। यदि आप एक डिज़ाइनर या डेवलपर हैं, तो आपके लिए अच्छा होगा कि आप UX डिज़ाइन सिद्धांतों का पालन करें और बढ़िया उत्पाद बनाएँ। यदि इस क्षेत्र में आपकी रुचि है, तो आरंभ करने के लिए आपको सही मार्ग का अनुसरण करना चाहिए।