دکمه "Up" برای سایت: چگونگی انجام این کار

چنین تابع، مانند دکمه "up" برای یک سایت، یک منبع اینترنتی را برای بازدیدکنندگان آن راحت تر می کند. این به شما کمک می کند تا به راحتی از هر نقطه از صفحه به بالای صفحه حرکت کنید. این فقط برای فروشگاه های آنلاین و سایت های با مقالات بزرگ که نیاز به حرکت طولانی به پایین لازم است.

برای چه چیزی است؟

در حال حاضر در اکثر سایتها مانند دکمه «بالا» چنین عملکردی وجود ندارد و در مورد این موضوع هیچ انتقادی وجود ندارد. اما استفاده از آن می تواند بسیاری از پلاسمید ها را برای منابع اینترنتی و بازدیدکنندگان آن به ارمغان بیاورد.

مزایای بازدیدکنندگان

اغلب زمانی اتفاق می افتد که صفحه ای از یک منبع اینترنتی به شدت با اطلاعات بارگیری می شود، زمانی که مقالۀ اطلاعات فضای بسیار زیادی را در بر می گیرد و شما باید صفحه را با چرخ ماوس پیمایش کنید. علاوه بر این، در پایان مقاله می تواند نظر بسیاری برای آن باشد.

هنگامی که یک بازدید کننده یک مقاله را خواند، هیچ چیز خسته کننده در پیمایش پایین صفحه وجود ندارد، اما زمانی که متن پایان یافته و حرکت به سمت بالا ضروری است، کمی شروع به تیرگی می کند. اکثر مردم به سادگی بیش از حد تنبل هستند برای هدایت یک اسکرول طولانی، و آنها فقط به جای رفتن به خیابان ها از طریق محدوده آن، سایت را نزدیک می کنند.

با استفاده از دکمه برای بلافاصله به سمت بالا صفحه، لذت بردن از سایت را راحت تر می کند.

مزایای استفاده از منابع اینترنتی

طرفهای مثبت خود منابع بر مبنای عوامل گذشته هستند، زیرا حرکت ساده شده در سایت، عوامل رفتاری را بهبود می بخشد، زیرا همه بازدیدکنندگان در فعالیت هایشان بیشتر فعال هستند و به صفحات دیگر حرکت می کنند.

بنابراین، این عوامل رفتاری بر نگرش همه موتورهای جستجو به سایت تأثیر می گذارد و منجر به بهبود موقعیت جستجوی نتایج می شود.

چگونه دکمه "up" را در سایت خود بسازید

ما بیشتر درک می کنیم دکمه پیمایش برای یک سایت در هر یک از سیستم مدیریت محتوا همیشه می تواند توسط خود شما انجام شود، فقط چند قدم ساده:

• ایجاد تصویر؛
• ایجاد یک اسکریپت؛
• ایجاد یک سبک دکمه؛
• اضافه کردن به سایت

تصویر دکمه

برای اضافه کردن دکمه "بالا" در سایت، برای اولین بار باید خود آیکون خود را ایجاد کنید، با کلیک کردن بر روی آن کاربر صفحه را حرکت می دهد. برای انجام این کار، می توانید از گزینه های آماده استفاده کنید، که در آن شما همیشه می توانید مناسب ترین را انتخاب کنید.

برای بهبود ظاهر دکمه، لازم است که برخی از بهبود، یعنی ایجاد یک sprite، که به شما اجازه می دهد ترکیب تصاویر پس زمینه بر اساس CSS، در نتیجه ایجاد انیمیشن از آنها.

برای کارهای گرافیکی می توانید از هر ویرایشگر استفاده کنید. اما گزینه راحت تر PIXLR سرویس آنلاین خواهد بود، زیرا هیچ چیز برای دانلود اینجا وجود ندارد و شما می توانید آن را به طور مستقیم در مرورگر استفاده کنید.

برای شروع کار در پنجره ویرایشگر ظاهر می شود، فیلد "Upload a file from computer" را انتخاب کنید. به عنوان مثال، تصویر راکت را بگیرید.

اگر ابعاد آیکون انتخاب شده بیش از حد بزرگ باشد، تنظیم مختصری از ابعاد مورد نیاز است. برای انجام این کار، به منوی بالا بروید و فیلد «ویرایش» را انتخاب کنید و بعد از «تبدیل رایگان ...»

در کنار تصویر، نشانگرهای خاصی وجود دارد، آنها را حرکت می دهند، شما می توانید اندازه تصویر را تغییر دهید. برای صرفه جویی در نسبت ها، می توانید از کلید Shift استفاده کنید، که، نگه داشتن، شما نیاز به حرکت نشانگرهای آبی دارید. در پایان این اقدامات، تصویر موشک به دست می آید.

گام بعدی ایجاد یک کپی از لایه است.

حالا شما نیاز به حرکت تصویر موشک از لایه جدید کمی است. برای این کار، استفاده از ابزار حرکت، که در ستون دوم منوی سمت چپ قرار دارد، مناسب است و دکمه «بالا» در صفحه کلید، مناسب است.

حالا شما باید تصویر بالا را در سیاه و سفید ایجاد کنید. این را می توان با استفاده از "اصلاح" - "رنگ / اشباع" آیتم در منوی بالا انجام می شود. برای رنگ آمیزی کامل، باید نوار لغزنده اشباع را به 100 تنظیم کنید. این عمل به شما این امکان را می دهد که هنگامی که دکمه "Up" از رنگ سیاه و سفید به رنگ پس زمینه برداشته می شود، اثر ایجاد کنید.

لمس نهایی حذف فضای اضافی در اطراف دو عکس است. برای انجام این کار، آیتم "برش" را از منوی سمت چپ انتخاب کنید و فقط دو موشک را در مستطیل انتخاب کنید. برای اجرای برداشت، کلید Enter را فشار دهید.

نتیجه یک تصویر است که در آن فضای اضافی وجود ندارد. لازم است که عرض و ارتفاع تصویر حاصل را ثبت کنید، زیرا این داده ها در مرحله بعدی مفید خواهد بود.

برای صرفه جویی، شما باید بر روی "File" - "Save" کلیک کنید، جایی که در سمت چپ "My Computer" نام تصویر (فقط طرح انگلیسی) را بنویسید، فرمت را انتخاب کنید (در این مورد - PNG) و روی دکمه "Yes" کلیک کنید.

فایل با اسکریپت دکمه "بالا"

در این مورد، شما نیازی به نوشتن یک اسکریپت ندارید. امکان استفاده از گزینه عمومی وجود دارد، و تعدادی اصلاح در کد کامل انجام می شود.

برای انجام این کار، شما باید هر ویرایشگر کد را دانلود کنید. محبوب ترین و رایگان نسخه Notepad ++ است. پس از نصب، شما باید همه این کد را کپی کنید و وارد کنید:

($ (این). scrollTop ()> 0) {$ ('# () () () () Scaleler ') FadeIn ()؛} else {$ (' # scroller '). FadeOut ()؛}}؛ $ (' # scroller '). کلیک کنید (function () {$ (' body، html '). تحریک ({scrollTop: 0}، 400)؛ بازگشت غلط؛})؛})؛

سپس روی منوی فوقانی "File" - "Save as ..." کلیک کنید و سپس کد را در قالب .js ذخیره کنید. پس از آن، می توانید از این کد در سایت خود استفاده کنید، فایل ها و تصاویر اسکریپت را با استفاده از اتصال FTP آپلود کنید.

نصب در سایت

برای تنظیم دکمه پیمایش برای سایت، شما باید کد را در محل مورد نظر قرار دهید. شما باید قبل از تگ وارد شوید .

ایجاد سبک دکمه در CSS

اغلب دکمه "بالا" برای سایت در پایین ("زیرزمین") واقع شده است.

در فایل style.css سایت شما باید کد زیر را وارد کنید:

"/ * را فشار دهید * / .scrollTop { background: url ('images / up.png') 0 0 بدون تکرار؛ / * یک مسیر ساده به تصویر * / عرض: 39px؛ / * عرض دکمه * / ارتفاع: 96px؛ / * 50٪ از ارتفاع دکمه * / پایین: 5px؛ / * برای موقعیت ثابت؛ عقب از پایین * / چپ: 89٪؛ / * افقی به سمت چپ * / } .scrollTop: شناور {background-position: 0 -108px؛ } / * پس زمینه افست * / "

در این مورد، شما نیاز به عرض داده و ارتفاع تصویر دارید. فقط برای وارد کردن داده ها به کد باقی می ماند و دکمه "up" برای سایت آماده خواهد شد! چه چیز دیگری؟

دکمه بالا برای سایت وردپرس

برای این CMS، دکمه "Up" را می توان با کمک پلاگین ها و همچنین به طور مستقل انجام داد.

روش با افزونه ها راحت تر و آسان است، زیرا این تنها نیاز به کلیک بر روی دکمه نصب و تنظیم تمام قابلیت های منوی افزونه است.

انتخاب دوم باید با احتیاط انجام شود، زیرا با این کار می توان به راحتی یک ویروس را در سایت به دست آورد. گزینه محبوب ترین و اثبات شده یک افزونه به نام Scroll Back To Top است. شما می توانید آن را با استفاده از جستجوی پلاگین Wordpress استاندارد دانلود کنید.

این افزونه دارای چندین توابع است و دکمه «بالا» برای یک سایت وردپرس بسیار آسان است. لازم نیست همه مقادیر را تغییر دهید، فقط باید پیکربندی ظاهر و محل دکمه را در صفحه سایت انجام دهید.

همانطور که می بینید تنظیم دکمه "بالا" با کمک پلاگین بسیار ساده است. اما یکی از نکاتی مهم است که هر پلاگین نصب شده CMS را بارگیری می کند. این می تواند سرعت اینترنت را تحت تاثیر قرار دهد. به همین دلیل است که بیشتر صاحبان سایت سعی می کنند همه تغییرات را مستقیما در کد اجرا کنند و نه با کمک برنامه های شخص ثالث. شما می توانید دکمه "up" برای سایت در HTML، که منابع مصرفی را به حداقل برساند.

قبل از تغییر تمام فایل های سیستم WordPress باید نسخه پشتیبان تهیه کند. بعد، شما می توانید تمام مراحل را برای ایجاد دکمه های خود، شرح داده شده در بالا دنبال کنید.

Knoka "up" برای جوملا

CMS جوملا نیز از نصب افزونه ها مانند WordPress پشتیبانی می کند. موفق ترین نسخه دکمه "up" برای یک سایت در جوملا 3 یک افزونه به نام Top of Page است.

در این CMS، هر پلاگین را می توان از طریق "Extension Manager" نصب کرد. برای این شما نیاز دارید:

• دانلود پلاگین در اینترنت؛
• بر روی دکمه "مرور" در Extension Manager کلیک کنید
• آرشیو دانلود شده را انتخاب کنید
• روی «دانلود» کلیک کنید و نصب کنید.

حالا شما باید آن را در "مدیر پلاگین" فعال کنید. برای انجام این کار، به این قسمت بروید، پلاگین را بیابید و وضعیت آن را به «در» تغییر دهید.

بعد، شما تمام تنظیمات برای افزونه را با استفاده از همان بخش که در آن شما نیاز به پیدا کردن "پارامترهای اساسی" این پلاگین در سمت راست را پیکربندی کنید.

بالای صفحه دارای قابلیت های زیر است:

• اجرا در / مدیر - گزینه را فعال کنید نه تنها در منبع اینترنتی، بلکه در CMS جوملا نیز.
• Button Position Reveal - تعداد پیکسل هایی که کاربر به عقب می اندازد تا دکمه "up" ظاهر شود.
• اتمام دکمه متن - متن روی دکمه.
• همیشه در بالا - صفحه سایت همیشه از ابتدا نمایش داده می شود. هنگام استفاده از "لنگر" برای حرکت به یک مکان خاص در صفحه، این گزینه لازم نیست فعال شود.
• اسکرول صاف - پیمایش صفحه را به صورت صاف تر انجام می دهد.
• مدت زمان حرکت - زمانی که صفحه به طور کامل به آغاز حرکت می کند.
• حرکت اسکرول - پیمایش برای جلوه های بصری بزرگ اضافه می کند.
• تسکین گذار - "تسکین" حرکت به بالای صفحه.
• محل سکونت - محل آیکون با استاندارد، دکمه در گوشه پایین سمت راست واقع شده است.
• از Styles استفاده کنید - سبک فردی دکمه است که می تواند در فیلد زیر تنظیم شود. اگر شما به یک مقدار منفی تغییر می کنید، سپس تمام تنظیمات سبک از موضوع سایت فعال می شود.
• سبک پیوند - زمینه برای وارد کردن تنظیمات سبک دکمه شما.

برای سفارشی کردن دکمه "بالا" شما باید حداقل حداقل دانش CCS داشته باشید. در غیر این صورت، لازم است پارامتر بعدی پارامتر را به "نه" تغییر دهید.

یکی دیگر از نکات مهم این است که کتیبه معمول روی آیکون حاوی متن انگلیسی است: بازگشت به بالا. در یک سایت روسی زبان، چنین متن نمی تواند حضور داشته باشد، بنابراین شما فقط آن را در تنظیمات پلاگین خاموش کرده یا آن را به زبان روسی تغییر دهید.

برای تغییر این کتیبه، باید به سرور سایت با استفاده از FTP یا ساخته شده در مدیریت پرونده میزبانی بروید. سپس در پوشه "/ administrator / language / en-GB /" شما باید یک فایل با نام "en-GB.plg_system_topofthepage.ini" پیدا کنید.

پیش از تغییر متن، رمزگذاری این سند را به UTF-8 تغییر دهید. این یک نمایش معمولی از حروف روسی است.

بعد خط زیر را می بینیم:

"PLG_SYS_TOPOFTHEPAGE_GOTOTOP =" بازگشت به بالا ""

و عبارت را در نقل قول به زبان روسی تغییر دهید. شما می توانید عباراتی مانند "بالا"، "در ابتدا!" یا "بالا!" استفاده کنید.

در پایان، شما باید فایل اصلاح شده را ذخیره کرده و دکمه "up" را برای سایت در جوملا بررسی کنید.

دکمه ی بالا برای Ucoz

دکمه "up" برای سایت در Ucoz باید با معرفی کد اجرا شود، زیرا پلاگین هایی برای این CMS نمی توانند متصل شوند. با این حال، برای انجام این کار، نیازی نیست فایلهای سیستم را برای مدت طولانی مطالعه کنید و خطوط لازم را جستجو کنید، فقط باید یک کد کوچک را در محل مورد نیاز وارد کنید.

برای نصب، ما نیاز داریم:

• به "کنترل پنل -> طراحی -> مدیریت طراحی (قالب) -> پایین سایت؛
• یک اسکریپت را وارد کنید (در وب سایت رسمی پروژه و منابع شخص ثالث یافت می شود).

نتیجه گیری

سپس یک آیکون در گوشه پایین سمت راست ظاهر می شود، و کاربر را به سمت بالای صفحه حرکت می دهد.

همانطور که می بینید تنظیم دکمه "Up" برای هر یک از CMS بسیار دشوار نیست. شما می توانید از روش نصب خودکار (پلاگین) و دستی استفاده کنید. با این حال، گزینه دوم باقی می ماند مناسب ترین، از آن است که بر عملکرد سایت تاثیر نمی گذارد.

شما می توانید از دکمه "up" برای یک سایت در HTML برای به حداقل رساندن استفاده از منابع سایت استفاده کنید، زیرا تعداد زیادی افزونه ها می توانند تاثیر منفی بر عملکرد منابع داشته باشند. یک دکمه پلاگین "up" تا حد زیادی نمیتواند زمان بارگذاری صفحات سایت را تحت تأثیر قرار دهد، اما در بیشتر موارد، کاربر دارای حداقل ده پلاگین در CMS نصب شده است. در این مورد، هر افزونه می تواند عملکرد صفحات سایت را منفی کند.