از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
پیمایش به بالا در وانیل جاوا اسکریپت در وب سایت شما یک وب سایت دارید که کاربران را وادار می کند تا مبلغ طولانی را پایین بیاورند – ارائه یک دکمه برای بازگشت به بالا یک ژست خوب است! در این دست -روی راهنما، ما یاد خواهیم گرفت که چگونه یک دکمه متحرک HTML/CSS/JS بسازیم تا به بالای صفحه بروید…
سرفصلهای مطلب
معرفی
هر زمان که وب‌سایتی دارید که کاربران را وادار می‌کند تا مقدار زیادی را پایین بیاورند – ارائه یک دکمه برای اسکرول کردن به بالا حرکت خوبی است!
در این دست -روی ما یاد خواهیم گرفت که چگونه یک دکمه متحرک HTML/CSS/JS بسازیم تا در جاوا اسکریپت Vanilla به بالا بروید.
توجه داشته باشید: کد منبع موجود است روی GitHub.
شروع شدن
ما عملکرد را از ابتدا ایجاد می کنیم و به آن یک ظاهر طراحی می کنیم. با استفاده از a querySelector()، دکمه ایجاد شده را انتخاب می کنیم و قابلیت مشاهده آن را تغییر می دهیم روی و بر اساس روی جایی که کاربر است روی را pageو یک رویداد را برای پیمایش به بالا راه اندازی کنید روی هر کلیک
اگر می‌خواهید درباره ایجاد یک اسکرول به بالا در React مطالعه کنید، روش حرکت به بالا در React با کامپوننت دکمه ما را بخوانید!
زیرا دکمه با استفاده از CSS در یک مکان خاص (پایین-راست) ثابت شده است position نشانه گذاری برای این عملکرد ممکن است در هر جایی در داخل درج شود body عنصر کد HTML شما:
<div className="scroll-to-top">
<span class="btn btn-position btn-style">^</i>
</div>
پس از اضافه شدن، می توانیم به دکمه و والد آن استایل دهید <div>. ما موقعیت دکمه را در پایین سمت راست ثابت می کنیم و آن را کمی از پایین و سمت راست تغییر می دهیم:
.scroll-to-top {
position: relative;
}
.btn-position {
position: fixed;
bottom: 40px;
right: 25px;
z-index: 20;
}
.btn-style {
background-color: #551b54;
border: 2px solid #fff;
border-radius: 50%;
height: 50px;
width: 50px;
color: #fff;
cursor: pointer;
animation: movebtn 3s ease-in-out infinite;
transition: all 0.5s ease-in-out;
font-size: 40px;
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
}
ما تنظیم کرده ایم visibility از این دکمه به hidden به طور پیش فرض ، به طوری که دکمه فقط زمانی ظاهر می شود که کاربر به یک موقعیت خاص (محور y) حرکت کند – ما این کار را با تغییر خاصیت آن با JavaScript بعداً انجام خواهیم داد. در نهایت، یک را اضافه می کنیم شناور و کمی انیمیشن روی دکمه به طوری که ثابت نمی ماند:
.icon-style:hover {
animation: none;
background: #fff;
color: #551b54;
border: 2px solid #551b54;
}
@keyframes movebtn {
0% {
transform: translateY(0px);
}
25% {
transform: translateY(20px);
}
50% {
transform: translateY(0px);
}
75% {
transform: translateY(-20px);
}
100% {
transform: translateY(0px);
}
}
پیاده سازی منطق
اکنون که دکمه استایل داده شده و نامرئی است – بیایید منطقی را پیاده سازی کنیم که وقتی کاربر به پایین اسکرول می کند آن را قابل مشاهده می کند. ما آن را از طریق انتخاب می کنیم querySelector() و یک را وصل کنید EventListener به عنصر:
const scrollBtn = document.querySelector(".btn");
در حال حاضر، بر اساس روی موقعیت مقدار Y پنجره (چه مقدار کاربر به صورت عمودی اسکرول کرده است، با شروع از 0) – ما تنظیم می کنیم visibility از عنصر به "visible" یا "hidden" اگر مقدار Y زیر یک آستانه مشخص باشد:
const btnVisibility = () => {
if (window.scrollY > 400) {
scrollBtn.style.visibility = "visible";
} else {
scrollBtn.style.visibility = "hidden";
}
};
اکنون تابعی داریم که با فراخوانی آن بررسی می کند که آیا صفحه وب به پایین اسکرول شده است یا خیر 400، و تنظیم می کند visibility از عنصر دکمه به visible، در غیر این صورت آن را تنظیم می کند hidden.
در نهایت – ما می خواهیم این تابع را به طور مکرر فراخوانی کنیم تا مکرراً موقعیت را بررسی کنیم و دید را مطابق با آن تنظیم کنیم. این بهترین کار از طریق یک شنونده رویداد که عملکرد را تحریک می کند روی هر تغییر پیمایش:
document.addEventListener("scroll", () => {
btnVisibility();
});
آخرین قطعه کدی که می خواهیم به یک شنونده رویداد وصل کنیم ، منطقی است که هنگام کلیک بر روی یک دکمه ، کاربر را به صورت برنامه ای بکشید. این scrollToTop() عملکرد از window نمونه همین کار را می کند! ما می توانیم با ارائه مختصات Y تعیین کنیم که “بالا” چیست و می توانیم متد را فراخوانی کنیم روی هر یک "click" رویداد روی دکمه:
scrollBtn.addEventListener("click", () => {
window.scrollTo({
top: 0,
behavior: "smooth"
});
});
توجه داشته باشید: window.scrollTo() دارای یک پارامتر رفتاری است که نشان می دهد پیمایش باید به آرامی (آرام) یا بلافاصله در یک مرحله پیشرفت کند (auto مقدار پیش فرض).
خودشه! سعی کنید به پایین پیمایش کنید page – یک دکمه متحرک ظاهر می شود. هنگامی که این کار را انجام داد و روی آن کلیک کردید، به آرامی به بالای صفحه باز خواهید گشت page:
نتیجه
پیمایش به بالای page سخت نیست – حتی با شنوندگان رویداد و انیمیشن ها! در این دست -روی راهنما، ما یاد گرفتیم که چگونه عملکرد اسکرول به بالا را با جاوا اسکریپت Vanilla پیاده سازی کنیم و دکمه را استایل دادیم.
منتشر شده در 1403-01-11 09:28:03
