جاوا اسکرپٹ اور jQuery کا استعمال کرتے ہوئے 'سکرول ٹو ٹاپ' بٹن کیسے بنائیں۔

ایک 'سکرول ٹو ٹاپ' بٹن استعمال کیا جاتا ہے تاکہ آپ کا نظارہ صفحے کے اوپر آسانی سے لوٹ سکے۔ یہ چھوٹی UX خصوصیت جدید ویب سائٹس میں بہت عام ہے۔ یہ خاص طور پر ان ویب صفحات کے لیے مددگار ہے جن میں بہت زیادہ مواد ہے ، جیسے سنگل پیج ایپلی کیشنز۔

ایک پروگرام کو دوسری ڈرائیو میں منتقل کریں۔

اس آرٹیکل میں ، آپ جاوا اسکرپٹ اور jQuery کا استعمال کرتے ہوئے سکرول ٹو ٹاپ بٹن بنانے کا طریقہ سیکھیں گے۔

---

---

جاوا اسکرپٹ کا استعمال کرتے ہوئے سکرول ٹو ٹاپ بٹن بنانے کا طریقہ

آپ مندرجہ ذیل کوڈ کے ٹکڑوں کا استعمال کرتے ہوئے اپنی ویب سائٹ میں سکرول ٹو ٹاپ بٹن شامل کر سکتے ہیں۔

ایچ ٹی ایم ایل کوڈ

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 پکسلز سے زیادہ سکرول کرتا ہے تو کلاس کو بٹن عنصر میں شامل کیا جاتا ہے۔ یہ دکھائیں کلاس بٹن عنصر کو مرئی بنا دیتی ہے۔ پہلے سے طے شدہ طور پر ، بٹن عنصر کی نمائش کو پوشیدہ رکھا جاتا ہے۔ بٹن کے بارے میں مزید تفصیلات درج ذیل سی ایس ایس کوڈ میں ہیں۔

سی ایس ایس کوڈ۔

متعلقہ: سادہ سی ایس ایس کوڈ کی مثالیں جو آپ 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 کوڈ کے ساتھ کھیل سکتے ہیں اور اپنی ضروریات کے مطابق بٹن کو سٹائل کر سکتے ہیں۔

اب آپ کے پاس مکمل طور پر فعال سکرول ٹو ٹاپ / بیک ٹو ٹاپ بٹن ہے۔ اگر آپ اس آرٹیکل میں استعمال ہونے والے مکمل سورس کوڈ پر ایک نظر ڈالنا چاہتے ہیں تو یہ ہے۔ گٹ ہب ذخیرہ۔ اسی کی.

نوٹ : اس مضمون میں استعمال شدہ کوڈ ہے۔ ایم آئی ٹی لائسنس یافتہ .

صارف کے تجربے کے بارے میں مزید جانیں۔

صارف کا تجربہ اس بات پر مرکوز ہے کہ آیا کوئی پروڈکٹ اپنے صارفین کی ضروریات کو پورا کرتی ہے۔ اگر آپ ڈیزائنر یا ڈویلپر ہیں ، تو آپ UX ڈیزائن کے اصولوں پر عمل کریں گے اور زبردست مصنوعات بنائیں گے۔ اگر یہ فیلڈ آپ کی دلچسپی ہے تو ، آپ کو شروع کرنے کے لیے صحیح راستے پر چلنا ہوگا۔

کیا آپ کروم بک پر روبلوکس کھیل سکتے ہیں؟

بانٹیں بانٹیں ٹویٹ ای میل۔ یو ایکس ڈیزائنر بننا چاہتے ہیں؟ شروع کرنے کا طریقہ یہاں ہے۔

یہ UX ڈیزائنر کا کام ہے کہ اس بات کو یقینی بنائے کہ سافٹ وئیر استعمال کرنے والے کی ضروریات کا خیال رکھا جائے ، اور وہ اس عمل میں خوش ہیں۔

اگلا پڑھیں۔ متعلقہ موضوعات۔

• پروگرامنگ۔
• جاوا اسکرپٹ۔
• jQuery

مصنف کے بارے میں یوراج چندر۔(60 مضامین شائع ہوئے)

یوراج دہلی یونیورسٹی ، انڈیا میں کمپیوٹر سائنس کے انڈر گریجویٹ طالب علم ہیں۔ وہ فل اسٹیک ویب ڈویلپمنٹ کے بارے میں پرجوش ہے۔ جب وہ نہیں لکھ رہا ہے ، وہ مختلف ٹیکنالوجیز کی گہرائی کو تلاش کر رہا ہے۔

یوراج چندر سے مزید

ہماری نیوز لیٹر کو سبسکرائب کریں

ٹیک ٹپس ، جائزے ، مفت ای بکس ، اور خصوصی سودوں کے لیے ہمارے نیوز لیٹر میں شامل ہوں!

سبسکرائب کرنے کے لیے یہاں کلک کریں۔