1246
جزئیات وبلاگ
آموزش ایجاد دکمه
شما هم تا کنون گزینه رفتن به بالا را در برخی سایت ها مشاهده کرده اید. در این موارد بعد از مقداری اسکرول کردن صفحه به سمت پایین گزینه ای ظاهر می شود که کاربر با فشردن آن مجددا به بالای صفحه ارجاع داده می شود. شما هم می توانید به راحتی از چنین امکانی در سایت خود استفاده کنید. فقط کافیست یک دکمه یا آیکون بدین منظور طراحی کرده و با چند خط کد ساده جی کوئری این گزینه را فعال کنید. و اما مراحل کار:
ابتدا یک شکل یا آیکون مناسب برای گزینه ی "برو بالا" در نظر بگیرید و آن را در هر موقعیت دلخواهی از صفحه html قرار دهید. مثلا سمت چپ یا راست صفحه. آیکون برو بالا باید همواره در موقعیت خود ثابت باشد. یعنی مثلا در وسط صفحه سمت راست قرار گیرد و با اسکرول عمودی صفحه نیز ثابت باشد. بدین منظور باید موقعیت آن را به صورت ثابت یا fixed قرار داهید:
position:fixed;
بد نیست مقداری شفافیت یا opacity این شی را نیز کاهش دهید. زیرا ممکن است لازم باشد این آیکون بر روی سایر اشیاء موجود در صفحه قرار گیرد. به طور مثال: opacity:0.7; . باید برای شی مذکور(دکمه برو بالا) یک id انتخاب کنید تا در ادامه بتوان از آن استفاده کرد.در اینجا ما آی دی Scroll را برای این شی در نظر می گیریم. همچنین حالت اولیه نمایش یا همان display این شی را مقدار none قرار دهید تا هنگام نمایش اولیه صفحه نمایش داده نشود.
حال باید با کلیک بر روی این آیکون به بالای صفحه برگردیم. بدین منظور میتوان کل تگ آیکون را بدین شکل درون یک تگ a قرار دهیم:
با کلیک بر روی دایو با نام scroll که درون تگ a قرار دارد با بالای صفحه منتقل خواهیم شد. توجه کنید که کد آنکلیک داخل تگ a عملیات رفتن به بالا را انجام می دهد.
تا بدین جا یک دکمه طراحی کردیم که با فشردن آن به ابتدای صفحه ارجاع داده می شویم. اما برای زیبایی کار بهتر است در ابتدای صفحه که هنوز اسکرول عمودی صورت نگرفته است این آیکون نمایش داده نشود.این آیکون باید به گونه ای باشد که پس از کمی اسکرول شدن به سمت پایین صفحه نمایش داده شود. بدین منظور باید از جی کوئری استفاده کینم. در جی کوئری تابعی وجود دارد که با اسکرول شدن صفحه اجرا می شود:
$(window).scroll(function () { ………….. });
در تابع فوق هر کدی که در قسمت نقظه چین نوشته شود هنگام اسکرول شدن صفحه اجرا خواهد شد. حالا باید به گونه ای به سیستم اعلام کنیم که هر زمان کاربر به اندازه کافی به سمت پایین اسکرول کرد دکمه مورد نظر را نمایش بده. بدین منظور می توان از scrollTop در جی کوئری استفاده کرد. این گزینه میزان اسکرول شدن از بالای صفحه را مشخص میکند. توسط کد زیر می توانید میزان اسکرول شدن از بالای صفحه را محاسبه و آن را درون یک متغیر به نام heightScrolled قرار دهید تا بتوان در ادامه از آن استفاده نمود.
var $heightScrolled = $(window).scrollTop();
حالا فرض کنید می خواهیم بعد از این که صفحه 600 پیکسل اسکرول شد دکمه "برو بالا" نمایش داده شود. توسط کد زیر دکمه برو بالا که با آی دی Scroll ایجاد شده است که پس از 600 پیکسل اسکرول به سمت پایین، نمایش داده خواهد شد:
شرط if اول زمانی اجرا می شود که مقدار اسکرول صفحه کمتر از 600 پیکسل باشد و توسط این شرط آیکون "برو بالا مخفی می گردد". هر زمان اسکرول بیشتر از 600 پیکسل شد شرط if دوم اجرا خواهد شد و آیکون برو بالا نمایش داده می شود.
بدین شکل شما می توانید از گزینه برو بالا در سایت خود استفاده کنید. امیدوارم از این آموزش بهره کافی را برده باشید.
آموزش ایجاد دکمه