إنشاء زر للصعود لأعلى الصفحة Scroll to top button

فهاد المقال غانتعرفو على كيفاش تقاد زر للصعود لأعلى الصفحة بإستخدام javascript. هاد الطريقة ولات كاتستخدم بزاف لأنها كاتساعد المستخدم انو يتنقل في الموقع أو التطبيق بطريقة سهلة و سلسة.

الزر The button :

غانوضعو زر غانكتبو عليه Top و غانعطيوه id=scrolltotop .

<button id="scrolltotop">Top</button>

من بعد خاصنا نعطيو لهاد الزر style اللي كايناسبو و غانستعملو position:fixed باش إبقا فنفس المكان وخا نطلعو و نهبطو في الصفحة. بالإضافة لأنه مغايبانش في الاول حيت أصلا غانكونو في أعلى الصفحة لذلك غانعطيوه display:none.

#scrolltotop {
  padding: 1rem;
  border-radius: 10px;
  background-color: black;
  color: white;
  font-weight: 700;
  font-size: 20px;
  border: none;
  outline: none;
  cursor: pointer;
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: none;
}

javascript :

• إظهار زر الصعود للمستخدم :

أولا غانوضعو الزر في متغير غانسميوه scrollToTopBtn.

const scrollToTopBtn = document.getElementById("scrolltotop");

ثم غانقومو بمراقبة الصعود و النزول اللي كايقوم به المستخدم في الصفحة بإستخدام Event سميتو scroll, و غانقومو بتنفيد function في كل تغير. ثم غانحصلو على القيمة ديال scroll بإستخدام window.scrollY. إلى كانت القيمة ديال scroll أكبر من 500 فهادشي كايعني ان المستخدم هبط لمسافة اللي خاصنا نبينو فيها الزر ديال الصعود, لذلك غانغير display ديال الزر من none إلى block.

function handleScroll() {
  if (window.scrollY > 500) {
    scrollToTopBtn.style.display = "block";
  } else {
    scrollToTopBtn.style.display = "none";
  }
}

document.addEventListener("scroll", handleScroll);

علاش بالضبط 500 ؟

انا بانتلي 500 هي المنطقة المثالية لإظهار زر الصعود, انت بإمكانك تغير كيف بغيتي دير القيمة اللي كاتباليك مناسبة.

• الصعود عند الضغط على الزر :

غانقومو بمراقبة الزر بإستعمال Event سميتو click و ملي المستخدم يضغط على الزر غانجعلو الصفحة تصعد للأعلى. الصعود للأعلى بالنسبة للصفحة كايعني top=0.

function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  });
}

scrollToTopBtn.addEventListener("click", scrollToTop);

باش نقولو للصفحة تصعد للأعلى ستخدمنا method كاينة في ل window سميتها scrollTo و عطيناها top:0, بالإضافة اننا حددنا طريقة الصعود جعلناها سلسة smooth.

النهاية :

هادشي داخل في UX (User experience) اللي هو مجموعة من الخطوات لجعل تجربة المستخدم في الموقع أو التطبيق بسيطة و ممتعة.