دکمه "بازگشت به بالا" را در jQuery صاف کنید. انتقال متحرک به بالای صفحه نحوه انتقال به بالای صفحه
عملکردی مانند دکمه "بالا" برای یک سایت، منبع اینترنتی را برای بازدیدکنندگان آن راحت تر می کند. این به شما کمک می کند تا به راحتی از هر نقطه از صفحه به بالای صفحه بروید. این برای فروشگاه‌های آنلاین و سایت‌هایی با مقالات بزرگ که نیاز به یک اسکرول طولانی به پایین دارند، ضروری است.
چرا این لازم است؟در حال حاضر، اکثر سایت ها عملکردی مانند دکمه "بالا" ندارند و هیچ چیز مهمی در مورد آن وجود ندارد. اما استفاده از آن می تواند مزایای زیادی هم برای منبع اینترنتی و هم برای بازدیدکنندگان آن به همراه داشته باشد.
مزایا برای بازدیدکنندگاناغلب زمانی اتفاق می افتد که صفحه یک منبع اینترنتی به شدت با اطلاعات بارگیری می شود، زمانی که یک مقاله اطلاعاتی فضای زیادی را اشغال می کند و شما باید با استفاده از چرخ ماوس صفحه را به پایین اسکرول کنید. علاوه بر این، در پایان مقاله ممکن است نظرات زیادی در مورد آن وجود داشته باشد.
وقتی یک بازدیدکننده در حال خواندن مقاله ای است، هیچ چیز خسته کننده ای برای پیمایش صفحه به پایین نیست، اما وقتی متن به پایان می رسد و شما باید به سمت بالا بروید، کمی خسته کننده می شود. بیشتر مردم برای مدت طولانی برای پیمایش خیلی تنبل خواهند بود و به جای پرسه زدن در وسعت سایت، به سادگی سایت را می بندند.
استفاده از یک دکمه برای انتقال فوری به بالای صفحه باعث می شود زمان شما در سایت راحت تر شود.
سود برای منبع اینترنتیجنبه های مثبت خود منبع از عوامل گذشته ناشی می شود، زیرا ناوبری ساده در اطراف سایت عوامل رفتاری را بهبود می بخشد، زیرا همه بازدیدکنندگان در اقدامات خود فعال تر خواهند بود و به صفحات دیگر منتقل می شوند.
بنابراین، داده ها بر نگرش همه موتورهای جستجو نسبت به سایت تأثیر می گذارد و منجر به بهبود جایگاه آن در نتایج جستجو می شود.
چگونه خودتان یک دکمه "up" در یک وب سایت ایجاد کنید
- ایجاد یک تصویر؛
- ایجاد یک اسکریپت؛
- ایجاد یک سبک دکمه؛
- اضافه کردن به سایت
برای افزودن دکمه «بازگشت به بالا» در یک سایت، ابتدا باید خود آیکون را بسازید که با کلیک روی آن، کاربر به بالای صفحه منتقل می‌شود. برای این کار می توانید از گزینه های آماده استفاده کنید که همیشه می توانید مناسب ترین را انتخاب کنید.
برای بهبود ظاهر دکمه، لازم است برخی بهبودها ایجاد کنید، یعنی یک sprite ایجاد کنید که به شما امکان می دهد تصاویر پس زمینه را بر اساس CSS ترکیب کنید و در نتیجه از آنها انیمیشن ایجاد کنید.
برای کارهای گرافیکی می توانید از هر ویرایشگری استفاده کنید. اما راحت‌ترین گزینه، سرویس آنلاین PIXLR است، زیرا نیازی به دانلود چیزی در اینجا ندارید و می‌توانید مستقیماً از آن در مرورگر خود استفاده کنید.
برای شروع، در پنجره ویرایشگر ظاهر شده، باید فیلد «آپلود تصویر از رایانه» را انتخاب کنید. بیایید تصویر یک موشک را به عنوان مثال در نظر بگیریم.
اگر ابعاد نماد انتخاب شده خیلی بزرگ است، باید اندازه کوچکی را تنظیم کنید. برای این کار باید به منوی بالا رفته و قسمت “Edit” و بعد از “Free transform...” را انتخاب کنید.
بعد، نشانگرهای ویژه در کنار تصویر ظاهر می شوند، با حرکت دادن آنها، می توانید اندازه تصویر را تغییر دهید. برای حفظ نسبت ها، می توانید از کلید Shift استفاده کنید، در حالی که آن را نگه داشته اید، باید نشانگرهای آبی را حرکت دهید. در پایان این اقدامات تصویری از یک موشک به دست می آید.
مرحله بعدی ایجاد یک کپی از لایه است.
حال باید تصویر موشک را از لایه جدید کمی به سمت بالا حرکت دهید. برای انجام این کار، استفاده از ابزار حرکت که در ستون دوم منوی سمت چپ و فلش بالا روی صفحه کلید قرار دارد، راحت خواهد بود.
حالا باید تصویر بالا را سیاه و سفید کنید. این را می توان با استفاده از "تصحیح" - "Hue/Saturation" در منوی بالا انجام داد. برای عدم اشباع کامل، نوار لغزنده Saturation باید روی 100- تنظیم شود. این عمل به شما این امکان را می دهد که یک افکت ایجاد کنید که در آن دکمه "بالا" وقتی روی آن قرار می گیرید از سیاه و سفید به رنگی تبدیل می شود.
آخرین لمس حذف فضای اضافی اطراف دو عکس است. برای انجام این کار، مورد "برش" را از منوی سمت چپ انتخاب کنید و فقط دو موشک را در یک مستطیل انتخاب کنید. برای انجام برش، کلید Enter را فشار دهید.
نتیجه تصویری است که در آن فضای خالی اضافی وجود ندارد. شما باید عرض و ارتفاع تصویر به دست آمده را یادداشت کنید، زیرا این داده ها در مرحله بعد مفید خواهند بود.
برای ذخیره، باید روی "File" - "Save" کلیک کنید، جایی که در قسمت سمت چپ "My Computer" نام تصویر را می نویسیم (فقط طرح انگلیسی)، قالب را انتخاب کنید (در این مورد - PNG) و روی دکمه "بله" کلیک کنید.
فایل اسکریپت دکمه بالادر این مورد نیازی به نوشتن اسکریپت نیست. استفاده از گزینه در دسترس عموم با انجام برخی اصلاحات در کد نهایی امکان پذیر خواهد بود.
برای انجام این کار، باید هر ویرایشگر کد را دانلود کنید. محبوب ترین و همچنین رایگان ترین گزینه Notepad ++ است. پس از نصب، باید تمام این کدها را در آن کپی و پیست کنید:
| $(document).ready(function())( $(window).scroll(function () (if ($(this).scrollTop() > 0) ($("#scroller").fadeIn();) else ($("#scroller").fadeOut();)); ) ; |
برای نصب دکمه اسکرول به بالا برای یک سایت، باید کد را در محل مورد نیاز قرار دهید. باید آن را قبل از تگ وارد کنید .
استایل دادن به یک دکمه در CSSبیشتر اوقات، دکمه "بالا" برای یک سایت در پایین ("پانویس") قرار دارد.
شما باید کد زیر را به فایل style.css سایت اضافه کنید:
در این حالت به داده های مربوط به عرض و ارتفاع تصویر نیاز خواهید داشت. تنها چیزی که باقی می ماند این است که داده های دریافتی را در کد وارد کنید و دکمه "بالا" برای سایت آماده خواهد شد! چه چیز دیگری؟
دکمه بالا برای یک سایت وردپرس
برای این CMS، دکمه "بالا" را می توان با استفاده از افزونه ها و همچنین به طور مستقل ایجاد کرد.
روش پلاگین راحت ترین و راحت ترین نصب است، زیرا تنها کاری که باید انجام دهید این است که روی دکمه نصب کلیک کنید و تمام عملکردها را در منوی افزونه پیکربندی کنید.
انتخاب دومی باید با احتیاط انجام شود، زیرا همراه با آن می توانید به راحتی یک ویروس برای سایت خریداری کنید. محبوب ترین و اثبات شده ترین گزینه افزونه ای به نام Scroll Back To Top است. می توانید آن را با استفاده از جستجوی استاندارد افزونه وردپرس دانلود کنید.
این افزونه دارای عملکردهای متعددی است و سفارشی کردن دکمه "بازگشت به بالا" برای یک سایت وردپرس بسیار آسان خواهد بود. لازم نیست همه مقادیر را تغییر دهید، فقط باید ظاهر و مکان دکمه را در صفحه سایت پیکربندی کنید.
همانطور که می بینید، نصب دکمه “up” با استفاده از افزونه ها بسیار ساده است. اما یک نکته مهم وجود دارد و آن این است که هر افزونه نصب شده CMS را بارگیری می کند. این ممکن است بر سرعت منبع اینترنت تأثیر بگذارد. به همین دلیل است که اکثر صاحبان وب سایت سعی می کنند همه تغییرات را مستقیماً در کد ایجاد کنند و از افزونه های شخص ثالث استفاده نکنند. شما می توانید یک دکمه "بالا" برای یک وب سایت در HTML ایجاد کنید، که منابع مصرف شده را به حداقل می رساند.
قبل از تغییر تمامی فایل های سیستم وردپرس، باید از آنها نسخه پشتیبان تهیه کنید. در مرحله بعد، می توانید تمام مراحل را برای ایجاد دکمه خود که در بالا توضیح داده شد دنبال کنید.
دکمه بالا برای جوملا
سیستم مدیریت محتوا جوملا نیز مانند وردپرس از نصب افزونه ها پشتیبانی می کند. موفق ترین نسخه دکمه "بالا" برای یک سایت در جوملا 3 افزونه ای به نام Top of the Page است.
در این CMS، هر افزونه ای را می توان از طریق "Extension Manager" نصب کرد. برای انجام این کار شما نیاز دارید:
- دانلود افزونه در اینترنت؛
- روی دکمه "مرور" در مدیر برنامه افزودنی کلیک کنید.
- آرشیو دانلود شده را انتخاب کنید.
- روی "دانلود" کلیک کرده و نصب کنید.
اکنون باید آن را در Plugin Manager فعال کنید. برای انجام این کار، باید به این بخش بروید، افزونه را پیدا کنید و وضعیت آن را به "فعال" تغییر دهید.
Top of Page دارای عملکرد زیر است:
- Run in/ administrator - فعال کردن این گزینه نه تنها در منبع اینترنت، بلکه در خود پنل CMS جوملا.
- موقعیت آشکار دکمه - کاربر باید چند پیکسل را به عقب برگرداند تا دکمه "بالا" ظاهر شود.
- Omit Button Text - وجود متن روی دکمه.
- همیشه در بالا - صفحه سایت همیشه از ابتدا نمایش داده می شود. هنگام استفاده از لنگرها برای اسکرول به یک مکان خاص در صفحه، این گزینه نیازی به فعال کردن ندارد.
- اسکرول صاف - پیمایش صفحه را روانتر می کند.
- مدت زمان اسکرول - زمانی که پس از آن صفحه به طور کامل به ابتدا منتقل می شود.
- Scroll Transition - جلوه های بصری عالی را به پیمایش اضافه می کند.
- Transition Easing - حرکت "تسهیل" به بالای صفحه.
- مکان پیوند - مکان نماد. طبق استاندارد، دکمه در گوشه پایین سمت راست قرار دارد.
- از Styles استفاده کنید - سبک دکمه فردی، که می تواند در قسمت زیر تنظیم شود. اگر به یک مقدار منفی تغییر دهید، تمام پارامترهای استایل از موضوع سایت فعال گرفته می شود.
- سبک پیوند - فیلدی برای وارد کردن پارامترهای سبک دکمه.
برای سفارشی کردن سبک دکمه "بالا"، باید حداقل دانش CCS را داشته باشید. در غیر این صورت، باید مقدار پارامتر ماقبل آخر را به "No" تغییر دهید.
نکته مهم دیگر این است که کتیبه معمول روی نماد حاوی متن انگلیسی است: Return to Top. چنین متنی نمی تواند در یک سایت روسی زبان وجود داشته باشد، بنابراین باید به سادگی آن را در پارامترهای افزونه غیرفعال کنید یا آن را به روسی تغییر دهید.
برای تغییر این کتیبه، باید با استفاده از FTP یا مدیر فایل تعبیه شده در هاست وارد سرور سایت شوید. در مرحله بعد، در پوشه “/administrator/language/en-GB/” باید فایلی به نام “en-GB.plg_system_topofthepage.ini” پیدا کنید.
قبل از تغییر متن، باید کدگذاری این سند را به UTF-8 تغییر دهید. این امکان نمایش عادی حروف روسی را فراهم می کند.
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="بازگشت به بالا" " |
و عبارت داخل گیومه را به روسی تغییر دهید. می توانید از عباراتی مانند "بالا!"، "تا ابتدا!" استفاده کنید. یا "بالا!"
دکمه بالا برای Ucoz
دکمه "بالا" برای یک سایت در Ucoz باید با استفاده از تزریق کد انجام شود، زیرا اتصال پلاگین ها برای این CMS غیرممکن است. با این حال، این کار نیازی به مطالعه طولانی فایل های سیستم و جستجوی خطوط لازم ندارد، شما فقط باید یک کد کوچک را در محل مورد نظر وارد کنید.
برای نصب نیاز داریم:
- به "کنترل پنل -> طراحی -> مدیریت طراحی (الگوها) -> پایین سایت بروید.
- اسکریپت را وارد کنید (در وب سایت رسمی پروژه و منابع شخص ثالث قابل مشاهده است).
پس از این، یک نماد در گوشه پایین سمت راست ظاهر می شود که کاربر را به بالای صفحه منتقل می کند.
همانطور که می بینید، نصب دکمه "بازگشت به بالا" برای هر یک از CMS ها چندان دشوار نبود. می توانید از روش نصب خودکار (پلاگین) یا دستی استفاده کنید. با این حال، آخرین گزینه مناسب ترین است، زیرا تأثیر منفی بر عملکرد سایت ندارد.
می‌توانید از دکمه «بازگشت به بالا» برای یک سایت HTML استفاده کنید تا مصرف منابع سایت را به حداقل برسانید، زیرا تعداد زیاد افزونه‌ها می‌توانند تأثیر منفی بر عملکرد منبع داشته باشند. یک پلاگین دکمه "بالا" تاثیر زیادی بر زمان بارگذاری صفحات سایت نخواهد داشت، اما در بیشتر موارد کاربر حداقل ده ها افزونه را روی CMS نصب کرده است. در این صورت هر افزونه ای می تواند بر عملکرد صفحات سایت تاثیر منفی بگذارد.
اگر حجم قابل توجهی از محتوا در یک سایت وجود داشته باشد، مدیران وب‌سایت‌ها از دکمه به اصطلاح «scroll to top» استفاده می‌کنند. این دکمه به شما اجازه می دهد تا فوراً از طریق محتوا به بالای صفحه بروید و در نتیجه کاربر را از اسکرول دستی خسته کننده نجات دهید.
شما می توانید عملکرد دکمه "پیمایش به بالا" را در این صفحه وبلاگ مشاهده کنید.
خود دکمه از یک تصویر با فرمت png استفاده می کند، به همین دلیل است که ابتدا باید نسخه مناسب تصویر را برای خود پیدا کنید. یک سرویس آیکون با کیفیت بالا به نام iconfinder برای این کار مناسب است.
کد HTML برای خروجی دکمهبلوک div با شناسه arrowup بین تگ های ... فایل اجرایی قالب (معمولاً فایل index.php) قرار می گیرد. در قالب های استودیو Yootheme، این فایل theme.php است که در پوشه "layouts" قرار دارد.
یک ظاهر طراحی دکمه CSS
کد CSS استایل‌سازی دکمه که به کلاس arrowup پیوست شده است در هر فایل CSS موجود در قالب قرار می‌گیرد. به طور معمول از فایل style.css استفاده می شود که در پوشه "css" قرار دارد.
#arrowup ( موقعیت: ثابت؛ راست: 30 پیکسل؛ /*موقعیت دکمه: تورفتگی سمت راست*/ پایین: 30 پیکسل؛ /*موقعیت دکمه: تورفتگی پایین*/ پس زمینه: url(/images/arrowup.png)؛ /*مسیر به سمت دکمه های تصویر*/ عرض: /*اندازه دکمه*/ ارتفاع: /*اندازه دکمه*/ نشانگر: 0.8 /*سطح کدورت هنگام شناور کردن*/ )
کد JS برای کار کردن دکمهکد جاوا اسکریپت که عملکرد دکمه را پیاده سازی می کند یا بین برچسب های ... فایل اجرایی قالب (index.php) یا قبل از تگ بسته قرار می گیرد.
$(document).ready(function() ($(window).scroll(function() ( if ($(this).scrollTop() > 0) ($("#arrowup").fadeIn(300); / /button ناپدید شدن سرعت ) else ($("#arrowup").fadeOut(200); //button ظاهر شدن سرعت ) ) $("#arrowup").click(function() ($("body,html")); .animate(( scrollTop: 0 ), 200 //scroll speed return false;
نحوه پنهان کردن "دکمه بالا" در دستگاه های تلفن همراهبسیاری از وب مسترها هنگام نمایش یک سایت در دستگاه های تلفن همراه "دکمه بالا" را به دلیل بی فایده بودن آن پنهان می کنند. برای پنهان کردن دکمه "scroll to top" در دستگاه های تلفن همراه، از پرس و جو رسانه css @media استفاده کنید (همه چیز در همان فایل css style.css نوشته شده است):
صفحه فقط رسانه @ و (حداکثر عرض: 568 پیکسل) (پیکان # (نمایش: هیچ؛))
دکمه «بازگشت به بالا» یا «» یک عنصر محبوب و مفید در صفحات وب سایت های مدرن است، به خصوص زمانی که این صفحات حاوی محتوای زیادی هستند.
اول از همه، اینها به طور کلی قابلیت استفاده سایت را بهبود می بخشد. زمانی که کاربر حجم زیادی از محتوا را خوانده و به پایین صفحه اسکرول می کند تا به بالای سایت بازگردد، از اسکرول استاندارد استفاده می کند. برای اطمینان از اینکه کاربر به طور خودکار به بالای صفحه هدایت می شود، توسعه دهندگان و مدیران سایت که به بازدیدکنندگان خود فکر می کنند از انواع مختلفی از دکمه های "بازگشت به بالا" استفاده می کنند. اینها می‌توانند ساده‌ترین راه‌حل‌ها بدون استفاده از کتابخانه‌ها یا اسکریپت‌های اضافی، و همچنین با قابلیت‌های گسترده، اتصال یک کتابخانه و یک اسکریپت اجرایی کوچک باشند.
دکمه‌های «بازگشت به بالا» به روش‌های مختلفی طراحی شده‌اند که می‌توانند پیوندهای متنی معمولی، دکمه‌هایی با ظاهر کلاسیک، دکمه‌های گرد با یک فلش باشند، یا می‌توانند از یک تصویر از نوع مناسب استفاده کنند. اغلب اوقات، این دکمه ها ثابت به نظر می رسند.
امروز، با استفاده از یک مثال ساده، به نحوه استفاده از انیمیشن CSS برای اضافه کردن کمی حرکت به دکمه پاپ آپ «بازگشت به بالا» و در عین حال به خود اسکریپت که شامل رویدادهای جی کوئری که برای عملکرد دکمه لازم است.
برای فعال کردن یک دکمه در سایت خود، نیازی به افزودن هیچ برچسبی به نشانه گذاری HTML صفحه نیست. کافی است کتابخانه jQuery را متصل کنید و یک js اجرایی کوچک بنویسید و دکمه کار می کند. با اتصال فایل style.css به سند html، ظاهر و انیمیشن را با استفاده از CSS ایجاد می کنیم.
و بنابراین، اگر سایت شما هنوز کتابخانه jQuery را متصل نکرده است، این کار را می توان به راحتی با اتصال نسخه فعلی به طور مستقیم از شبکه تحویل محتوای Google (CDN) انجام داد.
| < script src= "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" > |
در زیر، درست زیر این خط، یک js اجرایی کوچک قرار دهید که دکمه ما را با تاخیر مشخصی نمایش می دهد و همچنین عملکرد اصلی خود را انجام می دهد و کاربر را به آرامی به بالای صفحه باز می گرداند.
| < script>jQuery (سند). Ready(function ($) ( var //سرعت اسکرول به بالای صفحه سرعت = 500 , //html طرح دکمه $scrollTop = $(" " ) . appendTo("body" ) ; $scrollTop . click(function (e) (e. preventDefault() ; $( "html:not(:animated),body:not(:animated)") . animate(( scrollTop: 0 , speed ) ) ; ) ) $(window) تابع () show_scrollTop ;) |
jQuery(document).ready(function($)(var //سرعت اسکرول به بالای صفحه سرعت = 500، //html طرح دکمه $scrollTop = $(" ").appendTo("body"); $scrollTop.click(function(e)(e.preventDefault(); $("html:not(:animated),body:not(:animated)").animate(( scrollTop: 0), speed ) //تنظیم حالت ظاهری تابع دکمه show_scrollTop() (($(window)). (600) ) $(window).scroll(function() ( show_scrollTop(); ));
برای درک بیشتر، به اصطلاح، نظراتی را به فیلمنامه اضافه کردم. همانطور که در بالا نوشتم، این روش نیاز به اضافه کردن هر گونه تگ به نشانه گذاری صفحه HTML را از بین می برد. هنگامی که کاربر صفحه را تا 300 پیکسل به پایین اسکرول می کند، افزونه یک برچسب دکمه می نویسد، در مورد ما این است:
| < a href= "#" title= "سریع به بالا برگرد" class = "scrollTop" >< i class = "fa fa-angle-double-up" > |
در بدنه صفحه، همه در یک مکان قبل از برچسب بسته شدن.
برای نمایش روان و پنهان کردن دکمه، از توابع .fadeIn () و .fadeOut () با سرعت معین 600 میلی ثانیه استفاده می کنیم. سرعت اسکرول به بالای صفحه روی 500 میلی ثانیه تنظیم شده است.
| < link href= "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel= "stylesheet" type= "text/css" > |
پس از اتصال Font Awesome، می توانید آنها را در کدهای HTML یا مانند مورد ما در js، با استفاده از کلاس های خاص، یک fa پایه و یک کلاس برای یک نوع خاص از نمادها استفاده کنید، در مورد ما این حالت fa-angle-double-up است. . می توانید کلاس یک نماد خاص را در وب سایت پیدا کنید.
ظاهر محفظه آیکون، اندازه و رنگ پس‌زمینه، موقعیت‌یابی، رنگ و اندازه فونت، همه اینها مستقیماً در css تعیین می‌شوند و با تمرکز روی selector.scrollTop i
| /* بدنه دکمه، موقعیت و جلوه انتقال را تشکیل می دهد */ .scrollTop ( /* به طور پیش فرض پنهان شده */ نمایشگر: هیچکدام؛ /* گوشه های گرد */ -webkit-border-radius: 100%؛ -moz-border-radius: 100% -ms-border-radius : 100% ; 1rem : 1rem ; 0.2 ثانیه مکعب بیزیر (0.42 , 0 , 0.58 , 1 ) ; انتقال : پایین 0.2 ثانیه مکعب (0.42 , 0 , 0.58 , 1 ) ) /* جابجایی دکمه به بالا در شناور */ .scrollTop : شناور (پایین : 2rem ) / * عناصر طراحی دکمه اضافی */ .scrollTop : قبل , .scrollTop : after ( محتوا : "" ; بالا: 0; سمت چپ: 0; پس زمینه رنگ: #766DCC ; عرض: 60 پیکسل؛ ارتفاع: 60px; -webkit-border-radius: 100% ; -moz-border-radius: 100% ; -ms-border-radius: 100% ; شعاع مرزی: 100% ; -webkit-animation-fill-mode: هر دو ; -moz-animation-fill-mode: هر دو ; حالت انیمیشن پر کردن: هر دو. موقعیت: مطلق; کدورت: 0; ) /* نام، نوع و سرعت انیمیشن را تعریف کنید llya:before */ .scrollTop : قبل (پس زمینه رنگ: #736cad؛ -webkit-animation: clickMe 1.8s 333ms infinite ease-out؛ -moz-animation: clickMe 1.8s 333ms infinite ease-out : clickMe 1.8s 333ms infinite ease-out ) /* نام، نوع و سرعت انیمیشن را تعریف کنید llya:after */ .scrollTop : after ( -webkit-animation: clickMe 1.8ms; infinite ease-out - moz-animation: clickMe 1.8s 777ms infinite ease-out: clickMe 1.8s 777ms infinite ease-out ) /* شکل ظاهری نماد */ .scrollTop i ( عرض: 30px ; 30px ; شعاع: 100% موقعیت: مطلق سمت چپ: 15 پیکسل. z-index : 100 ) /* animation */ @-webkit-keyframes clickMe ( 0% ( opacity : 0 ; -webkit-transform: scale ( 0 ) ) 5% ( opacity : 1 ) 100% ( opacity : 0 ) ) @-moz-keyframes clickMe ( 0% ( opacity : 0 ; -moz-transform: scale ( 0 ) ) 5% ( opacity : 1 ) 100% ( opacity : 0 ) ) @keyframes clickMe ( 0% ( opacity : 0 ; -webkit-transform: scale (0) -moz-transform: مقیاس (0) -ms-transform: scale (0) 100% (opacity: 0)) |
/* بدنه دکمه، موقعیت و جلوه انتقال را تشکیل می دهد */ .scrollTop ( /* به طور پیش فرض پنهان است */ نمایشگر: هیچکدام؛ /* گوشه های گرد */ -webkit-border-radius: 100%؛ -moz-border-radius: 100% - border-radius: 100% - fixed position: * نمای مکان نما */ نشانگر، /* اثر گذار بین دو حالت دکمه */ -webkit-transition: bottom 0.2s cubic-bezier(0.42, 0, 0.58, 1 -moz-transition: bottom 0.2s cubic-); bezier(0.42, 0.58, 1); cubic-bezier(0.42، 0، 0.58، 1) /* دکمه را به سمت بالا در نشانگر */ .scrollTop:hover (پایین: 2rem ) / * عناصر طراحی دکمه اضافی */ .scrollTop:before، .scrollTop:after ( محتوا : ""; سمت چپ: 0; عرض: 60 پیکسل؛ ارتفاع: 60px; -webkit-border-radius: 100%؛ -moz-border-radius: 100%; -ms-border-radius: 100%؛ شعاع مرزی: 100%; -webkit-animation-fill-mode: هر دو. -moz-animation-fill-mode: هر دو. حالت انیمیشن پر کردن: هر دو. موقعیت: مطلق; کدورت: 0; ) /* نام، نوع و سرعت انیمیشن را تعریف کنید llya:before */ .scrollTop:before ( background-color: #736cad; -webkit-animation: clickMe 1.8s 333ms infinite ease-out; -moz-animation: clickMe 1.8s 333ms infinite ease-out: clickMe 1.8s 333ms infinite ease-out ) /* نام، نوع و سرعت انیمیشن را تعریف کنید llya:after */ .scrollTop:after ( -webkit-animation: clickMe 1.87s. infinite ease-out - moz-animation: clickMe 1.8s 777ms infinite ease-out: clickMe 1.8s 777ms infinite ease-out ) /* شکل ظاهری نماد */ .scrollTop i ( عرض: 30px; 30px: بلاک: rgba (28, 243, 0.61) ; -شعاع: 100%؛ موقعیت: مطلق در سمت چپ: 15 پیکسل z-index: 100 ) /* انیمیشن */ @-webkit-keyframes clickMe ( 0% ( opacity: 0; -webkit-transform: scale(0) ) 5%; ( Opacity: 1 ) 100% ( Opacity: 0 ) ) @-moz-keyframes clickMe ( 0% ( opacity : 0; -moz-transform: scale(0) ) 5% ( opacity: 1 ) 100% ( opacity: 0 ) ) @keyframes clickMe ( 0% ( opacity: 0; -webkit-transform: scale(0)؛ -moz-transform scale(0) -ms-transform: scale(0) - scale(0)
باقی مانده است که خود انیمیشن را در نظر بگیریم. افکت انیمیشن روی کل دکمه اعمال نمی شود، بلکه برای شبه عناصر اضافی:after و:before اعمال می شود. برای ایجاد یک انیمیشن CSS، باید یک ویژگی انیمیشن را به سبک های این عناصر اضافه کنید، که به شما امکان می دهد یک نام تعریف کنید، شتاب و مدت انیمیشن را تنظیم کنید و همچنین جزئیات دیگری از نحوه جریان انیمیشن را تنظیم کنید. ظاهر انیمیشن با استفاده از @keyframes، مجموعه‌ای از کلیدها که فریم‌های انیمیشن را پیکربندی می‌کنند، پیکربندی می‌شود.
در مثال ما، نام انیمیشن این است: clickMe، مدت زمان: 1.8 ثانیه، تاخیر: 333 میلی‌ثانیه برای: قبل و 777 میلی‌ثانیه برای عنصر شبه: بعد. همچنین تعداد تکرارهای انیمیشن - بی نهایت بی نهایت و نوع انیمیشن ease-out - شتاب را در ابتدا تعیین می کنیم.
بعد از اینکه ویژگی های موقت انیمیشن را تنظیم کردیم، باید ظاهر انیمیشن را مشخص کنیم، این کار در داخل بلوک @keyframes انجام می شود. ابتدا نام انیمیشن آورده شده و سپس مراحل آن در داخل بریس های فرفری توضیح داده شده است. از مثال کد می توانید ببینید که فریم هایی از ویژگی opacity (شفافیت) و تبدیل عنصر تبدیل با تابع مقیاس - مقیاس عنصر - استفاده می شود. مراحل انیمیشن با استفاده از درصد مشخص می شود.
انیمیشن خصوصیات CSS به طور جداگانه برای مرورگرهای وب کیت @-webkit-keyframes و مرورگر موزیلا فایرفاکس @-moz-keyframes توضیح داده شده است تا از نمایش نادرست انیمیشن در این مرورگرهای وب جلوگیری شود.
همین. یک بار دیگر، به یک مثال زنده از نحوه عملکرد دکمه "بازگشت به بالا" نگاه کنید و در صورت نیاز به آن، منابع بسته بندی شده در یک آرشیو و پست شده در ابر در Y.Disk را دانلود کنید.
با تمام احترام، اندرو
دکمه "بازگشت به بالا" برای یک سایت از سال 2010 در بسیاری از وب سایت ها و وبلاگ ها ظاهر شد. آیا این دکمه مفید است و آیا کاربران از آن استفاده می کنند؟ از آن استفاده می کنند، اما نه زیاد. بنابراین، این دکمه معمولاً در جایی در لبه سایت اضافه می شود (بیشتر اوقات پایین سمت راست).
سه اجرا از دکمه بالا وجود دارد. به طور طبیعی، هر یک از آنها را می توان بیشتر به برخی از ظرافت ها تقسیم کرد، اما سه ایده اساسی وجود دارد. ما به هر یک از آنها نگاه خواهیم کرد و ارزیابی خود را به هر یک خواهیم داد.
راه های اجرای دکمه بازگشت به بالامن با بهترین روش شروع می کنم (پیچیدگی پیاده سازی متوسط است).
1. بر اساس جاوا اسکریپت و AJAX (JQuery)مثال توضیح داده شده در زیر در این سایت پیاده سازی شده است.
در این روش باید یک دکمه عالی با مشخصات زیر بدست آوریم:
- با فشار دادن دکمه، انتقال صاف به بالای صفحه فراهم می شود.
- دکمه شفاف خواهد بود.
- هنگامی که دکمه قابل مشاهده می شود، می توان ارتفاع را به پیکسل تنظیم کرد.
اگر همه کارها را طبق دستورالعمل انجام دهید، پس ایجاد دکمه نباید مشکلی داشته باشد. بنابراین، دستورالعمل های گام به گام:
الف. ایجاد یک فایل js
هر دفترچه یادداشتی را باز کنید (من Notepad++ را توصیه می کنم) کد زیر را بچسبانید و با پسوند js ذخیره کنید (مثلا gototop.js):
ب. تنظیم سبک
کد زیر را به فایل استایل اضافه کنید (فایل استایل یک فایل با پسوند css است). اغلب نام آن main.css یا style.css است:
به جای top.png باید آدرس کامل یا نسبی تصویر خود را وارد کنید. به جای 0px 0px و -56px 0px باید افست های خود را وارد کنید. یا از آفست استفاده نکنید، اما وقتی روی آن کلیک کردید، فقط از یک تصویر متفاوت استفاده کنید.
ج. اتصال اسکریپت ها به سایت
در مثال بالا، ما از فناوری AJAX استفاده کردیم، بنابراین باید کتابخانه jquery را نیز اضافه کنیم. همچنین باید فایل gototop.js را که ایجاد کردید در پاراگراف اول قرار دهید:
و در پایین سایت (قبل از برچسب بدنه) خط را اضافه کنید:
من تمام فایل های لازم برای این کار را در آرشیو جمع آوری کردم: gototop.rar
2. دکمه بدون AJAXاجرای این روش بسیار ساده است یا بهتر است بگوییم ساده تر از این نمی تواند باشد. علاوه بر این، من حتی این روش را به دو روش فرعی تقسیم می کنم.
2.1. استفاده از لنگر لینکدر بالای سایت یک شناسه برای برخی از عناصر می نویسیم. منطقی است که آن را برای عنوان بنویسیم، زیرا این شروع محتوا است. و در زیر می توانید پیوندی به لنگر قرار دهید. کد چیزی شبیه به این است:
... عنوان مقاله...معایب این روش قابل توجه است:
- دکمه بازگشت به بالا همیشه قابل مشاهده خواهد بود، حتی اگر کاربر قبلاً در بالا باشد
- ثبت لنگر الزامی است. این ممکن است همیشه راحت نباشد
- انتقال به بالا ناگهانی است (حرکت صاف وجود ندارد)
یک مزیت وجود دارد: عدم نیاز به استفاده از اسکریپت.
2.2. با استفاده از جاوا اسکریپتروش جاوا اسکریپت بسیار شبیه به روش قبلی است. همین دکمه، فقط این بار نیازی به اضافه کردن انکر به همه صفحات نخواهیم داشت. این هم کد:
...سبک را می توان مانند مثال 2.1 نوشت.
من معتقدم که هنوز هم بهتر است از روش 1 استفاده شود، زیرا جلوه بصری دلپذیرتری برای کاربران دارد که در این عصر بسیار مهم است.
در این پست یک دکمه "بالا" را می سازیم، ماهیت آن این است که هنگام اسکرول کردن سایت ظاهر می شود و با کلیک بر روی آن کاربر را به بالای صفحه فعلی می فرستد. من فکر نمی کنم ارزش توضیح زیادی را داشته باشد، همه ما دکمه های مشابه "بازگشت به بالا" را در بسیاری از سایت ها دیده ایم.
برای ایجاد دکمه "بازگشت به بالا" برنامه ریزی کنید1. بیایید یک ساختار html برای این دکمه ایجاد کنیم.
2. بیایید آن را سبک کنیم. بیایید آن را نامرئی کنیم و در سمت راست نسبت به لبه صفحه سایت قرار دهیم.
3. بیایید یک اسکریپت بنویسیم که پس از پیمایش دکمه نمایش داده شود و کلیک کاربر روی خود دکمه «بازگشت به بالا» پردازش شود.
بنابراین، همه چیز با برنامه اقدام برای ایجاد یک دکمه در بالا مشخص است، اجازه دهید شروع به اجرای آن کنیم :)
1. بیایید یک ساختار html برای دکمه "بازگشت به بالا" ایجاد کنیمکد دکمه را قبل از تگ بسته شدن قرار دهید
2. سبک های دکمه "بازگشت به بالا".تصمیم گرفتم دکمه را با یک موقعیت ثابت در گوشه پایین سمت راست بسازم. من به نماد اندازه ثابت، رنگ پس زمینه و گوشه های گرد دادم.
من همچنین استایل را برای رویداد hover تنظیم کردم و با استفاده از ویژگی transition یک انتقال صاف انجام دادم.
/* دکمه برگشت به بالا */ #back-to-top( position:fixed; z-index: 999; display:none; bottom:70px; right:15px; cursor:pointer; عرض: 50 پیکسل;
3. اسکریپت برای دکمه "بازگشت به بالا".ابتدا اجازه دهید چند متغیر را تعریف کنیم. محدودیت اول - حاوی مقدار 1/3 ارتفاع صفحه است و به عنوان شرط ظاهر شدن دکمه "بازگشت به بالا" ما عمل می کند.
BackToTop دوم، انتخاب دکمه ما توسط jQuery را ذخیره می کند تا چندین بار به آن دسترسی نداشته باشید.
Var limit = $(window).height()/3, $backToTop = $("#back-to-top");
بیایید یک شرط برای ظاهر شدن و ناپدید شدن دکمه خود بنویسیم. شرط در مورد ما این خواهد بود که بررسی کنیم آیا کاربر یک سوم صفحه را اسکرول کرده است یا خیر.
اگر پیمایش کرده باشید، دکمه "بازگشت به بالا" ظاهر می شود، اگر نه، یا به بالا باز می گردد، سپس ناپدید می شود.
$(window).scroll(function () ( if ($(this).scrollTop() > limit) ($backToTop.fadeIn(); ) else ($backToTop.fadeOut(); ) ));
آخرین لمس این است که رویداد کلیک را به دکمه "بازگشت به بالا" متصل کنیم. وقتی روی دکمه کلیک می کنیم باید به ابتدای صفحه فعلی هدایت شویم. ما این کار را با چند خط کد انجام خواهیم داد:
// با کلیک بر روی $backToTop.click(function () ($("body,html").animate(( scrollTop: 0), 1500); return false; ));
این همان چیزی است که کل کد به نظر می رسد
Var limit = $(window).height()/3, $backToTop = $("#back-to-top"); $(window).scroll(function () ( if ($(this).scrollTop() > limit) ($backToTop.fadeIn(); ) else ($backToTop.fadeOut(); ) )); // با کلیک بر روی $backToTop.click(function () ($("body,html").animate(( scrollTop: 0), 1500); return false; ));
نتیجهبنابراین ما کار بر روی ایجاد دکمه "بازگشت به بالا" را به پایان رساندیم. این تنها یکی از گزینه هایی است که می توانید با ایجاد تغییراتی در قسمت CSS این پست، آن را متنوع کنید.
مقاله آزمایشی از جلوه های CSS که در این پست توضیح داده شده است استفاده می کند
