چگونه دکمه‌ی بازگشت به بالا صفحه را ایجاد کنیم

چگونه دکمه‌ی رول‌شوندن به بالا را ایجاد کنیم

قدم اول - اضافه کردن HTML:

یک دکمه ایجاد کنید که با کلیک بر روی آن کاربر به بالای صفحه می‌رود:

<button onclick="topFunction()" id="myBtn" title="برو به بالا">بالا</button>

دوومین قدم - اضافه کردن CSS:

بٹن کا استایل قائم کریں:}

#myBtn {
  display: none; /* دفعتی طور پر پائیدار کیا جاتا ہے */
  position: fixed; /* پائیدار/چسپ/لوکیشن */
  bottom: 20px; /* اس بٹن کو صفحہ کی نیچل سمت 20 پی ایکس سے پائیدار کریں */
  right: 30px; /* اس بٹن کو صفحہ کی دائیں سمت 30 پی ایکس سے پائیدار کریں */
  z-index: 99; /* اس کو دوسروں سے اوپر رکھنا */
  border: none; /* کالاموچن کا حذف کریں */
  outline: none; /* کالاموچن کا حذف کریں */
  background-color: red; /* پس منظر رنگ سیتی کا رنگ کریں */
  color: white; /* لسانی رنگ */
  cursor: pointer; /* ماوس پر کورسار کا ماوس پوائنٹر اضافہ کریں */
  padding: 15px; /* کچھ اندرون فضائی پیداواریاں */
  border-radius: 10px; /* کونوں کا رینج */
  font-size: 18px; /* فونٹ سائز بڑھائیں */
}
#myBtn:hover {
  background-color: #555; /* ماوس پر کالی رنگ کا پس منظر اضافہ کریں */
}

تینواں قدم - جاوااسکریپٹ شروع کریں:

// بٹن حاصل کیا جاتا ہے:
let mybutton = document.getElementById("myBtn");
// جب یوزر صفحہ کی اوپر سے نیچے 20 پی ایکس اسکرول کرتا ہے تو اس بٹن کو دکھا دیا جاتا ہے
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  }
    mybutton.style.display = "none";
  }
}
// جب یوزر بٹن پر کلک کرتا ہے تو صفحہ کی اوپر کی جانا
function topFunction() {
  document.body.scrollTop = 0; // سافری کے لئے
  document.documentElement.scrollTop = 0; // لایک چروم، فایرفاکس، آئی ای اچ اے اور آپریا مراٹرز کے لئے
}

به طور مستقیم امتحان کن