ஜாவாஸ்கிரிப்ட் மற்றும் jQuery ஐப் பயன்படுத்தி 'ஸ்க்ரோல்-டு-டாப்' பட்டனை உருவாக்குவது எப்படி

பக்கத்தின் மேல் உங்கள் பார்வையை எளிதாக திரும்பப் பெற ஒரு 'உருட்டு-க்கு-மேல்' பொத்தான் பயன்படுத்தப்படுகிறது. இந்த சிறிய 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 பிக்சல்களுக்கு மேல் உருட்டினால் பட்டன் உறுப்பில் வகுப்பு சேர்க்கப்படும். இந்த நிகழ்ச்சி வர்க்கம் பொத்தானை உறுப்பு தெரியும். இயல்பாக, பொத்தான் உறுப்பின் தெரிவுநிலை மறைக்கப்படும். பொத்தானைப் பற்றிய கூடுதல் விவரங்கள் பின்வரும் CSS குறியீட்டில் உள்ளன.

CSS குறியீடு

தொடர்புடையது: எளிய 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 குறியீட்டில் விளையாடலாம் மற்றும் உங்கள் தேவைகளுக்கு ஏற்ப பொத்தானை ஸ்டைல் ​​செய்யலாம்.

இப்போது உங்களிடம் முழு செயல்பாட்டு சுருள்-க்கு-மேல் / பின்-மேல்-பொத்தான் உள்ளது. இந்த கட்டுரையில் பயன்படுத்தப்படும் முழுமையான மூலக் குறியீட்டைப் பார்க்க விரும்பினால், இதோ கிட்ஹப் களஞ்சியம் அதே.

குறிப்பு : இந்தக் கட்டுரையில் பயன்படுத்தப்படும் குறியீடு எம்ஐடி உரிமம் பெற்றது .

பயனர் அனுபவத்தைப் பற்றி மேலும் அறிக

ஒரு தயாரிப்பு அதன் பயனர்களின் தேவைகளைப் பூர்த்தி செய்கிறதா என்பதில் பயனர் அனுபவம் கவனம் செலுத்துகிறது. நீங்கள் ஒரு வடிவமைப்பாளர் அல்லது ஒரு டெவலப்பர் என்றால், நீங்கள் UX வடிவமைப்பு கொள்கைகளைப் பின்பற்றி அற்புதமான தயாரிப்புகளை உருவாக்குவது நல்லது. இந்தத் துறையில் ஆர்வம் உங்களுக்கு இருந்தால், தொடங்குவதற்கு நீங்கள் சரியான வழியைப் பின்பற்ற வேண்டும்.

என் போன் நிறுவனத்தில் இலவச ரேடியோ

பகிர் பகிர் ட்வீட் மின்னஞ்சல் யுஎக்ஸ் வடிவமைப்பாளராக வேண்டுமா? எப்படி தொடங்குவது என்பது இங்கே

மென்பொருள் பயனரின் தேவைகளை கவனித்துக்கொள்வதையும், அவர்கள் செயல்பாட்டில் மகிழ்ச்சியடைவதையும் உறுதி செய்வது UX வடிவமைப்பாளரின் வேலை.

அடுத்து படிக்கவும் தொடர்புடைய தலைப்புகள்

• நிரலாக்க
• ஜாவாஸ்கிரிப்ட்
• jQuery

எழுத்தாளர் பற்றி யுவராஜ் சந்திரா(60 கட்டுரைகள் வெளியிடப்பட்டன)

யுவராஜ் இந்தியாவின் டெல்லி பல்கலைக்கழகத்தில் கணினி அறிவியல் இளங்கலை மாணவர். அவர் முழு ஸ்டாக் வலை மேம்பாட்டில் ஆர்வம் கொண்டவர். அவர் எழுதாதபோது, ​​அவர் பல்வேறு தொழில்நுட்பங்களின் ஆழத்தை ஆராய்கிறார்.

யுவராஜ் சந்திராவின் மேலும்

எங்கள் செய்திமடலுக்கு குழுசேரவும்

தொழில்நுட்ப குறிப்புகள், மதிப்புரைகள், இலவச மின் புத்தகங்கள் மற்றும் பிரத்யேக ஒப்பந்தங்களுக்கு எங்கள் செய்திமடலில் சேரவும்!

குழுசேர இங்கே சொடுக்கவும்