జావాస్క్రిప్ట్ మరియు j క్వెరీని ఉపయోగించి 'స్క్రోల్-టు-టాప్' బటన్‌ని ఎలా సృష్టించాలి

మీ వీక్షణను పేజీ ఎగువకు సులభంగా తిరిగి ఇవ్వడానికి 'స్క్రోల్-టు-టాప్' బటన్ ఉపయోగించబడుతుంది. ఆధునిక వెబ్‌సైట్లలో ఈ చిన్న UX ఫీచర్ చాలా సాధారణం. సింగిల్-పేజీ అప్లికేషన్‌ల వంటి చాలా కంటెంట్ ఉన్న వెబ్ పేజీలకు ఇది ప్రత్యేకంగా సహాయపడుతుంది.

బెస్ట్ 3 ఇన్ 1 యాపిల్ ఛార్జింగ్ స్టేషన్

ఈ వ్యాసంలో, జావాస్క్రిప్ట్ మరియు j క్వెరీని ఉపయోగించి స్క్రోల్-టు-టాప్ బటన్‌ని ఎలా సృష్టించాలో మీరు నేర్చుకుంటారు.

---

---

జావాస్క్రిప్ట్ ఉపయోగించి స్క్రోల్-టు-టాప్ బటన్‌ను ఎలా సృష్టించాలి

కింది కోడ్ స్నిప్పెట్‌ని ఉపయోగించి మీరు మీ వెబ్‌సైట్‌కు స్క్రోల్-టు-టాప్ బటన్‌ని జోడించవచ్చు:

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.

ఇక్కడ, డమ్మీ డేటాతో వెబ్‌పేజీ యొక్క ప్రాథమిక నిర్మాణం సృష్టించబడింది. మీరు స్క్రోల్-టు-టాప్ బటన్ పై మాత్రమే దృష్టి పెట్టాలి.

---

---

ఈ బటన్ క్లిక్ చేసినప్పుడు, పేజీ పైకి స్క్రోల్ చేయబడుతుంది. J క్వెరీ కోడ్‌ని జోడించిన తర్వాత ఇది పనిచేస్తుంది.

j క్వెరీ కోడ్

సంబంధిత: J క్వెరీలో ఒక మూలకాన్ని ఎలా సృష్టించాలో తెలుసుకోండి

// ===== 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 కోడ్‌తో ప్లే చేయవచ్చు మరియు మీ అవసరాలకు అనుగుణంగా బటన్‌ని స్టైల్ చేయవచ్చు.

ఇప్పుడు మీకు పూర్తి ఫంక్షనల్ స్క్రోల్-టు-టాప్ / బ్యాక్-టు-టాప్ బటన్ ఉంది. మీరు ఈ కథనంలో ఉపయోగించిన పూర్తి సోర్స్ కోడ్‌ని చూడాలనుకుంటే, ఇక్కడ ఉంది GitHub రిపోజిటరీ అదే.

గమనిక : ఈ వ్యాసంలో ఉపయోగించిన కోడ్ MIT లైసెన్స్ పొందింది .

వినియోగదారు అనుభవం గురించి మరింత తెలుసుకోండి

వినియోగదారు అనుభవం ఒక ఉత్పత్తి దాని వినియోగదారుల అవసరాలను తీర్చగలదా అనే దానిపై దృష్టి పెడుతుంది. మీరు డిజైనర్ లేదా డెవలపర్ అయితే, మీరు UX డిజైన్ సూత్రాలను పాటించడం మరియు అద్భుతమైన ఉత్పత్తులను సృష్టించడం మంచిది. ఈ ఫీల్డ్ ఆసక్తి మీకు ఉంటే, మీరు ప్రారంభించడానికి సరైన మార్గాన్ని అనుసరించాలి.

నిర్దిష్ట సంఖ్యలకు ఆటో ప్రత్యుత్తరం వచనం

షేర్ చేయండి షేర్ చేయండి ట్వీట్ ఇమెయిల్ UX డిజైనర్ కావాలనుకుంటున్నారా? ఎలా ప్రారంభించాలో ఇక్కడ ఉంది

సాఫ్ట్‌వేర్ వినియోగదారుల అవసరాలు తీర్చబడ్డాయని మరియు వారు ఈ ప్రక్రియలో సంతోషంగా ఉన్నారని నిర్ధారించుకోవడం UX డిజైనర్ పని.

తదుపరి చదవండి సంబంధిత అంశాలు

• ప్రోగ్రామింగ్
• జావాస్క్రిప్ట్
• j క్వెరీ

రచయిత గురుంచి యువరాజ్ చంద్ర(60 కథనాలు ప్రచురించబడ్డాయి)

యువరాజ్ భారతదేశంలోని ఢిల్లీ విశ్వవిద్యాలయంలో కంప్యూటర్ సైన్స్ అండర్ గ్రాడ్యుయేట్ విద్యార్థి. అతను పూర్తి స్టాక్ వెబ్ డెవలప్‌మెంట్ పట్ల మక్కువ కలిగి ఉన్నాడు. అతను వ్రాయనప్పుడు, అతను వివిధ సాంకేతికతల లోతును అన్వేషిస్తున్నాడు.

యువరాజ్ చంద్ర నుండి మరిన్ని

మా వార్తాలేఖకు సభ్యత్వాన్ని పొందండి

టెక్ చిట్కాలు, సమీక్షలు, ఉచిత ఈబుక్‌లు మరియు ప్రత్యేకమైన డీల్స్ కోసం మా వార్తాలేఖలో చేరండి!

సభ్యత్వం పొందడానికి ఇక్కడ క్లిక్ చేయండి