چنین عملکردی مانند دکمه "بالا" برای سایت، منبع اینترنتی را برای بازدیدکنندگانش راحت تر می کند. این به شما کمک می کند تا به راحتی از هر نقطه از صفحه به بالای صفحه بروید. این برای فروشگاه های آنلاین و سایت هایی با مقالات بزرگ که نیاز به پیمایش طولانی به پایین دارند، ضروری است.
برای چیست
در حال حاضر، بیشتر سایت ها عملکردی به عنوان دکمه "بالا" ندارند و هیچ چیز مهمی در این مورد وجود ندارد. اما استفاده از آن می تواند مزایای زیادی هم برای منبع اینترنتی و هم برای بازدیدکنندگان آن به همراه داشته باشد.
منفعت برای بازدیدکنندگان
اغلب زمانی اتفاق می افتد که صفحه یک منبع اینترنتی به شدت با اطلاعات بارگیری می شود، زمانی که یک مقاله اطلاعاتی فضای زیادی را اشغال می کند و شما باید صفحه را با چرخ ماوس به پایین اسکرول کنید. علاوه بر این، در پایان مقاله ممکن است نظرات زیادی در مورد آن وجود داشته باشد.
وقتی بازدیدکننده مقاله ای را می خواند، پیمایش صفحه به پایین خسته کننده نیست، اما وقتی متن به پایان می رسد و شما باید به سمت بالا حرکت می کنید، کمی خسته کننده می شود. بیشتر مردم برای مدت طولانی برای پیمایش خیلی تنبل خواهند بود و به جای اینکه دوباره در وسعت آن قدم بزنند، به سادگی سایت را می بندند.
استفاده از دکمهحرکت فوراً به بالای صفحه باعث می‌شود وقت خود را در سایت راحت‌تر بگذرانید.
منفعت برای منبع اینترنتی
مزایای مثبت خود منبع از عوامل گذشته ناشی می شود، زیرا ناوبری آسانتر در سایت عوامل رفتاری را بهبود می بخشد زیرا همه بازدیدکنندگان در اقدامات خود فعال تر می شوند و به صفحات دیگر می روند.
بنابراین، این عوامل رفتاری بر نگرش همه موتورهای جستجو به سایت تأثیر می گذارد و منجر به بهبود موقعیت در نتایج جستجو می شود.
چگونه خودتان دکمه "up" را در سایت ایجاد کنید
معامله بیشتر. شما همیشه می توانید یک دکمه اسکرول به بالا برای یک سایت در هر یک از CMS ها با دنبال کردن چند مرحله بسیار ساده ایجاد کنید:
- ایجاد تصویر؛
- ایجاد یک اسکریپت؛
- ایجاد سبک دکمه؛
- افزودن به سایت.
تصویر دکمه
برای افزودن دکمه "بالا" در سایت، ابتدا باید خود نماد را بسازید، پس از کلیک، کاربر به بالای صفحه منتقل می شود. برای این کار می توانید از گزینه های آماده استفاده کنید که همیشه می توانید از بین آنها مناسب ترین را انتخاب کنید.
برای بهبود ظاهر دکمه، باید برخی بهبودها را انجام دهیم، یعنی یک sprite بسازیم که به ما امکان می دهد تصاویر پس زمینه را بر اساس CSS ترکیب کنیم و در نتیجه از آنها یک انیمیشن ایجاد کنیم.
برای کارهای گرافیکی می توانید از هر ویرایشگری استفاده کنید. اما راحت ترین گزینه یک سرویس آنلاین خواهد بود. PIXLR، زیرا چیزی برای دانلود در اینجا وجود ندارد و می توانید مستقیماً از آن در مرورگر خود استفاده کنید.
برای شروع، در پنجره ویرایشگر ظاهر شده، فیلد «آپلود تصویر از رایانه» را انتخاب کنید. بیایید تصویر یک موشک را به عنوان مثال در نظر بگیریم.
اگر ابعاد نماد انتخاب شده خیلی بزرگ است، باید اندازه کوچکی را تنظیم کنید. برای این کار به منوی بالا رفته و قسمت "Edit" را انتخاب کنید و بعد از "Free transform …"
بعد، نشانگرهای خاصی در کنار تصویر ظاهر می شوند که با حرکت دادن آنها می توانید اندازه تصویر را تغییر دهید. برای حفظ تناسبات، می توانید از کلید Shift استفاده کنید، که با نگه داشتن آن باید نشانگرهای آبی را حرکت دهید. در پایان این مراحل تصویری از موشک به دست می آید.
مرحله بعدی ایجاد یک کپی از لایه است.
حالا باید تصویر موشک را از لایه جدید کمی به بالا ببرید. برای انجام این کار، استفاده از ابزار حرکت، که در ستون دوم منوی سمت چپ، و فلش رو به بالا در صفحه کلید قرار دارد، راحت خواهد بود.
حالا باید تصویر بالایی را سیاه و سفید کنیم. این را می توان با استفاده از مورد "تصحیح" - "Hue / Saturation" در منوی بالا انجام داد. برای عدم اشباع کامل، نوار لغزنده Saturation باید روی 100- تنظیم شود. این عمل به شما امکان می دهد افکتی ایجاد کنید که در آن دکمه "بالا" هنگامی که ماوس را روی آن قرار می دهید از سیاه و سفید به رنگی تبدیل می شود.
لمس نهایی حذف فضای اضافی در اطراف دو عکس است. برای انجام این کار، مورد "برش" را از منوی سمت چپ انتخاب کنید وما فقط دو موشک را در یک مستطیل انتخاب می کنیم. برای انجام برش، کلید Enter فشار داده می شود.
نتیجه تصویری است که در آن فضای خالی اضافی وجود ندارد. باید عرض و ارتفاع تصویر به دست آمده را یادداشت کنید، زیرا این داده ها در مرحله بعدی مفید خواهند بود.
برای ذخیره، باید روی "File" - "Save" کلیک کنید، جایی که در پاراگراف سمت چپ "My Computer" نام تصویر را می نویسیم (فقط طرح انگلیسی)، قالب را انتخاب کنید (در این Case, PNG) و روی دکمه "بله" کلیک کنید.
فایل با اسکریپت دکمه "بالا"
در این مورد نیازی به نوشتن اسکریپت ندارید. استفاده از نسخه عمومی با ایجاد برخی اصلاحات در کد نهایی امکان پذیر خواهد بود.
برای انجام این کار، باید هر ویرایشگر کدی را دانلود کنید. محبوب ترین و همچنین رایگان ترین گزینه Notepad ++ است. پس از نصب آن، باید تمام این کد را کپی و در آن جایگذاری کنید:
| $(document).ready(function(){$(window).scroll(function () {if ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} else {$('scroller').fadeOut();}}؛ $('scroller'). کلیک کنید(function () {$('body, html').animate({scrollTop: 0}، 400)؛ بازگشت نادرست؛}؛ }); |
بعدی، در منوی بالایی "File" - "Save as …" کلیک کنید، پس از آن کد را در قالب js ذخیره می کنیم. پس از آن، می توانید با آپلود فایل های اسکریپت و تصاویر با استفاده از اتصال FTP، از این کد در سایت خود استفاده کنید.
نصب در سایت
برای تنظیم دکمه اسکرول به بالا برای سایت، باید در آن قرار دهیدکد مکان مورد نیاز باید آن را قبل از تگ وارد کنید.
ایجاد یک استایل دکمه با CSS
بیشتر اوقات، دکمه "بالا" برای سایت در پایین ("پانویس") قرار دارد.
کد زیر باید به فایل style.css سایت اضافه شود:
|
/دکمه بالا/ .scrollTop{ background:url('images/up.png') 0 0 بدون تکرار؛/مسیر تصویر اصلی/ width:39px;/ دکمه عرض/ ارتفاع:96px;/50% ارتفاع دکمه/ bottom:5px;/بالشتک پایین در موقعیت ثابت/ چپ:89%؛/shift چپ/ }.scrollTop:hover{ background-position:0 -108px; } /تغییر پس زمینه/" |
در این مورد، داده های عرض و ارتفاع تصویر مورد نیاز خواهند بود. فقط کافی است داده های دریافتی را وارد کد کنید و دکمه "بالا" برای سایت آماده خواهد شد! چه چیز دیگری؟
دکمه Up برای سایت وردپرس
برای این CMS، دکمه "بالا" را می توان با استفاده از افزونه ها و همچنین به طور مستقل ایجاد کرد.
روش افزونه‌ها راحت‌ترین و آسان‌ترین روش برای نصب است، زیرا فقط باید روی دکمه نصب کلیک کنید و تمام عملکردها را در منوی افزونه پیکربندی کنید.
انتخاب دومی باید با احتیاط انجام شود، زیرا با آن دسترسی به ویروس در سایت آسان خواهد بود. محبوب ترین و اثبات شده ترین گزینه افزونه ای به نام Scroll Back To Top است. می توانید آن را با استفاده از جستجوی استاندارد افزونه های وردپرس دانلود کنید.
این برنامه افزودنی داردقابلیت های متعدد، و سفارشی کردن دکمه "بالا" برای یک سایت وردپرس بسیار آسان خواهد بود. به هیچ وجه نیازی به تغییر همه مقادیر نیست، فقط باید ظاهر و مکان دکمه را در صفحه سایت پیکربندی کنید.
همانطور که می بینید، تنظیم دکمه up با افزونه ها بسیار آسان است. اما یک نکته مهم وجود دارد و آن این است که هر افزونه نصب شده CMS را بارگیری می کند. این ممکن است بر سرعت منبع اینترنت تأثیر بگذارد. به همین دلیل است که اکثر صاحبان سایت سعی می کنند همه تغییرات را مستقیماً در کد ایجاد کنند و نه با کمک افزونه های شخص ثالث. شما می توانید یک دکمه "بالا" برای یک سایت HTML ایجاد کنید، که منابع مصرف شده را به حداقل می رساند.
قبل از تغییر همه فایل های سیستم وردپرس، باید از آنها نسخه پشتیبان تهیه کنید. سپس می‌توانید تمام مراحل را برای ایجاد دکمه خود، که در بالا توضیح داده شد، دنبال کنید.
دکمه "بالا" برای جوملا
CMS جوملا از نصب افزونه هایی مانند وردپرس نیز پشتیبانی می کند. موفق ترین نسخه دکمه "بالا" برای یک سایت در جوملا 3 افزونه ای به نام بالای صفحه است.
در این CMS، هر افزونه ای را می توان از طریق "Extension Manager" نصب کرد. برای این شما نیاز دارید:
- دانلود افزونه در اینترنت؛
- روی دکمه "Browse" در مدیر برنامه افزودنی کلیک کنید؛
- انتخاب آرشیو دانلود شده؛
- روی "دانلود" کلیک کنید و نصب کنید.
اکنون باید آن را در "Plugin Manager" فعال کنید. برای اینشما باید به این بخش بروید، افزونه را پیدا کنید و وضعیت آن را به "فعال" تغییر دهید.
مرحله بعدی پیکربندی تمام پارامترهای برنامه افزودنی با استفاده از همان بخش است که در آن باید "پارامترهای اساسی" این افزونه را در سمت راست پیدا کنید.
Top of the Page دارای عملکرد زیر است:
- Run in/ administrator - این گزینه را نه تنها در منبع اینترنت، بلکه در خود پانل CMS جوملا نیز فعال می کند.
- موقعیت نمایش دکمه - کاربر چند پیکسل باید به عقب برگرداند تا دکمه بالا ظاهر شود.
- Omit Button Text - وجود متن روی دکمه.
- همیشه در بالا - صفحه سایت همیشه از بالای صفحه نمایش داده می شود. هنگام استفاده از لنگرها برای پیمایش به یک مکان خاص در صفحه، این گزینه نیازی به فعال کردن ندارد.
- Smooth Scroll - پیمایش صفحه را روان‌تر می‌کند.
- مدت حرکت - زمانی که پس از آن صفحه به طور کامل به ابتدا منتقل می شود.
- Scroll Transition - جلوه های بصری بیشتری به پیمایش اضافه می کند.
- Transition Easing - "تضعیف" حرکت به بالای صفحه.
- موقعیت پیوند - محل نماد. به طور پیش فرض، دکمه در گوشه پایین سمت راست قرار دارد.
- Use Styles – سبک دکمه فردی، که می تواند در قسمت زیر تنظیم شود. اگر به مقدار منفی تغییر دهید، تمام تنظیمات سبک از موضوع فعال سایت گرفته می شود.
- Link Style - فیلدی برای وارد کردن پارامترهای سبک دکمه شما.
برای سفارشی کردن سبک دکمه "بالا"، باید حداقل حداقل داشته باشیددانش CCS در غیر این صورت، باید مقدار پارامتر ماقبل آخر را به "No" تغییر دهید.
نکته مهم دیگر این است که کتیبه معمول روی نماد حاوی متن انگلیسی است: Return to Top. چنین متنی نمی تواند در یک سایت روسی زبان وجود داشته باشد، بنابراین شما باید آن را به سادگی در پارامترهای افزونه غیرفعال کنید یا آن را به روسی تغییر دهید.
برای تغییر این کتیبه، باید با استفاده از FTP یا مدیر فایل تعبیه شده در هاست، به سرور سایت بروید. در مرحله بعد، در دایرکتوری "/administrator/language/en-GB/" باید فایلی به نام "en-GB.plg_system_topofthepage.ini" پیدا کنید.
قبل از تغییر متن، باید رمزگذاری این سند را به UTF-8 تغییر دهید. این کار باعث نمایش عادی حروف روسی می شود.
بعدی خط زیر را پیدا می کنیم:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="بازگشت به بالا"" |
و عبارت داخل گیومه را به روسی تغییر دهید. می توانید از عباراتی مانند "بالا!"، "به بالا!" یا "بالا!".
در پایان، باید فایل اصلاح شده را ذخیره کنید و دکمه "بالا" را برای سایت در جوملا بررسی کنید.
دکمه Up برای Ucoz
دکمه "بالا" برای سایت در Ucoz باید با استفاده از تزریق کد انجام شود، زیرا اتصال پلاگین ها برای این CMS غیرممکن است. با این حال، این کار نیازی به مطالعه طولانی فایل های سیستم و جستجوی خطوط لازم ندارد، فقط باید یک کد کوچک را در جای مناسب قرار دهید.
برای نصب مامورد نیاز:
- برو به "کنترل پنل -> طراحی -> مدیریت طراحی (الگوها) -> پایین سایت؛
- اسکریپت را وارد کنید (در وب سایت رسمی پروژه و منابع شخص ثالث قابل مشاهده است).
نتیجه گیری
پس از آن، یک نماد در گوشه پایین سمت راست ظاهر می شود که کاربر را به بالای صفحه منتقل می کند.
همانطور که می بینید، تنظیم دکمه بازگشت برای هر یک از CMS ها چندان دشوار نبود. می توانید هم از روش نصب خودکار (افزونه ها) و هم از روش دستی استفاده کنید. با این حال، گزینه دوم مناسب ترین گزینه باقی می ماند، زیرا بر عملکرد سایت تأثیر منفی نمی گذارد.
می توانید از دکمه "بازگشت به بالا" برای یک سایت HTML استفاده کنید تا مصرف منابع سایت را به حداقل برسانید، زیرا تعداد زیاد برنامه های افزودنی می تواند تأثیر منفی بر عملکرد منبع داشته باشد. یک پلاگین دکمه "بالا" نمی تواند تأثیر زیادی بر زمان بارگذاری صفحات سایت بگذارد، اما در بیشتر موارد کاربر حداقل ده ها افزونه را روی CMS نصب کرده است. در این صورت، هر افزونه ای می تواند بر عملکرد صفحات سایت تأثیر منفی بگذارد.
