ایجاد دکمه اسکرول به بالا در المنتور بدون افزونه
ایجاد دکمه به بالا مطلب آموزشی که امروز درباره آن می خواهیم در سایت رزسافت
بحث کنیم و برای کمک به طراحان المنتور بکنیم افزودن دکمه رو به سمت بالا است که ممولا اکثر طراحان المنتور حال و حوصله
کد نویسی ندارند و مثل من می خواهن سریع کار تمام کنند،اما بعدا دچار مشکل می شوند یکی از این مشکلات اختلال بعضی از افزونه ها با هم که این امر یکی از مشکلات هست که هر طراح المنتور با آن دیر یا زود برخورد می کند و به ناچار مجبور است که یکی از این افزونه ها را پاک کند و از قضا دکمه رو به بالا جز اون افزونه است که باید پاک شود حال باید چیکار کرد؟
آیا دکمه روبه بالا در سایت مهم است؟
در پاسخ به این سوال باید عرض کنم بله چون وقتی متن و توضیح که برای محصول خود می دهد شاید زیاد باشد
و مشتری یا بازدید کننده باید همه این متن ها را بخواند تا محصولی که انتخاب می کند محصولی است مورد نیازش است و می خواهد به بالا صفحه اسکرول کند لذا بودن یک دکمه به سمت بالا دو نکته به سایت شما می دهد
- جذابتر می کند با انمیشین که دارد
- باعث می شود کاربر بازدید کننده به بقیه مطالب سایت شما علاقمند شود
دلیل ذوم که یاعث می شود صاحبان سایت به کد نویسی روبیاورند ،بالا رفتن حجم صفحه سایت می شود که از نظر گوگل مورد قبول نیست علاوه بر گوگل بازدید کننده از سایت های سنگین که دیر باز می شوند زیاد مورد قبولشان نیست
ایجاد دکمه اسکرول به بالا در المنتور بدون افزونه
حالا بر گردیم سر اصل مطالب خودمان چطور می توان ایجاد کرد دکمه روبه بالا را در المنتور؟
برای اینکار ابتدا بالا صفحه خودتان یکی از ستون سایت خود را انتخاب می کند و در تب پیشرفته در قسمت ای دی
یک ID منحصر به فرد ایجاد می کنیم معمولا آی دی ها در css با # و بعد اسم هر چیزیمی تواند باشد اما نام گذاری معمولا دارای قوانین است که ابتدا ای دی شما نماید با عدد و علامت نامتعارف باشد
علامت نامتعارف مثل:%^$ که استفاده از آن احتمال دارد در سرور نشانه ها تعریف شود و باعث خطای اجرا شود
و به این صورت نامگذاری شود home# این ای دی رو یادتون نرود
چون باید در جایی دیگه فراخونی کرد یک دکمه در جایی ایجاد می کنید و اسم آن را حذف کرده و یک آیکون انتخاب کنید و در تب پیشرفته کلیک می کنیم و در انتخاب حالت روی فیکس (Fix) یا ثابت قرار می دهیم و بعد کمی اسکرول کرده درجایی که نوشته افسد 40 و در پایین همون قسمت قسمت پایین را کلیک و در انتخاب 40px بهش میدهیم وتمام به قسمت تب css دکمه رفته و این کد زیر را ایجاد می کنیم
selector{
opacity: 0;
transition: all 0.3s ease-in-out;
}
body.show selector{
opacity: 1;
}
یک وجیت Html در بالا سایت خود ایجاد کرده و کد زیر را کپی کنید این کد بهتون میگه که وقتی افست صفحه به اندازه 300 رسید و اسکرول لود شد یک تابع شروع میشه و دکمه که در بالا با css مخفی کردید نمایان میشه البته بصورت انیمیشن و تمام
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
//You can replace offset value from here
var offset = 300
$(window).on('load scroll', function(){
if( $(window).scrollTop() > offset ){
$('body').addClass('show')
}else{
$('body').removeClass('show')
}
})
</script>
