چگونه یک دکمه اسکرول به بالا با HTML، CSS و جاوا اسکریپت ایجاد کنیم؟ پروژه 4

ek3nk4r 2024-10-14

0 13 خواندن این مطلب 2 دقیقه زمان میبرد

چگونه یک دکمه اسکرول به بالا با HTML، CSS و جاوا اسکریپت ایجاد کنیم؟ پروژه 4

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

در این آموزش، مراحل ساده ای را برای شما توضیح می دهیم که چگونه می توانید دکمه Scroll-to-Top را در وب سایت خود اضافه کنید. چنین ورودی کمک زیادی به تجربه کاربر خواهد کرد، فقط در صورتی که کاربران بخواهند به بالای صفحه شما برگردند زیرا آنها در یک صفحه طولانی بسیار به پایین اسکرول کرده اند.

این ویژگی بسیار سرگرم کننده است و کمی مدرنیته را به وب سایت شما اضافه می کند! بیایید آن را با تکه‌های کد تمیز با استفاده از HTML، CSS و جاوا اسکریپت ایجاد کنیم.

فهرست مطالب

چرا یک دکمه اسکرول به بالا اضافه کنید؟

خب واضح است؛ راحتی و ناوبری آسان تر. این دکمه تضمین می کند که خوانندگان مجبور نخواهند شد پس از خواندن مطالب طولانی، برای خواندن بیشتر به بالای صفحه بروند. این اضافه کوچک می تواند تفاوت زیادی در قابلیت استفاده، به ویژه برای کاربران تلفن همراه ایجاد کند.

در اینجا چیزی است که ما پوشش خواهیم داد:

ساختار HTML
استایل دادن به دکمه با CSS
افزودن جاوا اسکریپت برای فعال کردن اسکرول
تعاملی و روان کردن آن
لمس نهایی: جلوه ها و انیمیشن هاور
ملاحظات طراحی پاسخگو
مزایای سئو دکمه های اسکرول به بالا

بیایید مستقیماً به چیزهای سرگرم کننده بپریم!

فیلم آموزشی:

https://www.youtube.com/watch?v=Y4bRwlxHa7E

1. ساختار HTML

ما با اضافه کردن ساختار اولیه HTML شروع می کنیم. بسیار کم است—فقط یک دکمه که در گوشه سمت راست پایین صفحه شما قرار دارد.




  
  
  Scroll-to-Top Button


  
  Scroll down to see the scroll-to-top button in action.

نکات کلیدی:

این دکمه با یک فلش (↑) نشان داده می شود که نماد عمل اسکرول رو به بالا است.
دکمه در حال حاضر خالی است، اما در ادامه به آن استایل می‌دهیم.

2. استایل دادن به دکمه با CSS

اینجاست که با استایل دادن به دکمه با CSS به آن جان می دهیم. ما مطمئن خواهیم شد که چشم نواز است و به درستی قرار گرفته است.

/* General page styling */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  height: 2000px; /* Making the page long enough to scroll */
  background-color: #f0f0f0;
}

h1 {
  text-align: center;
  margin-top: 50px;
  color: #333;
}

p {
  max-width: 600px;
  margin: 20px auto;
  font-size: 18px;
  line-height: 1.6;
  color: #666;
}

/* Scroll-to-top button styling */
#scrollToTopBtn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background-color: #ff6b6b;
  color: white;
  border: none;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: none;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#scrollToTopBtn:hover {
  background-color: #ff4747;
  transform: translateY(-5px);
}

#scrollToTopBtn.show {
  display: flex;
}