ساخت دکمه بازگشت به بالا در سایت

قرار دادن دکمه بازگشت به بالا در سایت!

این روز ها یکی از مهم ترین نکانی که باید در طراحی هر سایت به آن توجه ویژه داشت، راحتی و آسایش کاربر در هنگام استفاده از سایت است. گاهی اوقات توجه به نکاتی که ممکن است واقعا کوچک به نظر برسند، میتواند تاثیر شایان توجهی به بهتر شدن تجربه ی کاربر در استفاده از سایت شما داشته باشد.

 

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

 

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

 

شروع کار

قبل از هر کاری مثل همیشه بهتر است که از سایتتان یک نسخه ی پشتیبان تهیه کنید تا در صورتی که بخشی از آموزش را به اشتباه انجام دادید یا هر گونه مشکل پیش آمد، امکان بازگردانی از روی نسخه ی پشتیبان برای شما میسر باشد.
برای شروع ابتدا لازم است که یک فایل با نام topbutton.js ایجاد کنید و کد زیر را در فایل قرار دهید:
<br /><br /><br /><br /><br /><br /> jQuery(document).ready(function($){<br /><br /><br /><br /><br /><br /> var offset = 100;<br /><br /><br /><br /><br /><br /> var speed = 250;<br /><br /><br /><br /><br /><br /> var duration = 500;<br /><br /><br /><br /><br /><br /> $(window).scroll(function(){<br /><br /><br /><br /><br /><br /> if ($(this).scrollTop() < offset) {<br /><br /><br /><br /><br /><br /> $(‘.topbutton’) .fadeOut(duration);<br /><br /><br /><br /><br /><br /> } else {<br /><br /><br /><br /><br /><br /> $(‘.topbutton’) .fadeIn(duration);<br /><br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /><br /> });<br /><br /><br /><br /><br /><br /> $(‘.topbutton’).on(‘click’, function(){<br /><br /><br /><br /><br /><br /> $(‘html, body’).animate({scrollTop:0}, speed);<br /><br /><br /><br /><br /><br /> return false;<br /><br /><br /><br /><br /><br /> });<br /><br /><br /><br /><br /><br /> });<br /><br /><br /><br /><br /><br />

 

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

 

مقدار offset در خط دوم تعیین میکند که کاربر چه مقدار باید به پایین حرکت کرده باشد تا دکمه بازگشت به بالا نمایان شود. (به پیکسل)
سرعت اسکرول توسط مقدار speed در خط سوم تعیین میشود.
مقدار duration مدت زمان اجرای افکت fade را تعیین میکند.
این مقادیر را میتوانید با توجه به نیاز خودتان تغییر دهید تا به نتایج دلخواه دست پیدا کنید.

ایجاد کردن دکمه

دکمه ی ما از دو بخش تشکیل خواهد شد. یکی تصویری که شما برای پس زمینه ی دکمه انتخاب میکنید و دیگری استایل css که در مرحله ی بعد برای آن تعریف میکنیم. بنابراین در این مرحله لازم است که یک تصویر مناسب برای دکمه ی بازگشت به بالا انتخاب کنید. این انتخاب کاملا به خود شما بستگی دارد. اما اگر میخواهید درگیر پیچیدگی ها نشوید باید در نظر داشته باشید که اندازه ی تصویر شما باید ۵۰ در ۵۰ پیکسل باشد.

 

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

افزودن استایل css

در این مرحله باید فایل style.css قالبتان را برای ویرایش باز کنید و کد زیر را در آن قرار دهید:
<br /><br /><br /><br /><br /> .topbutton {<br /><br /><br /><br /><br /> height:50px;<br /><br /><br /><br /><br /> width:50px;<br /><br /><br /><br /><br /> position:fixed;<br /><br /><br /><br /><br /> right:5px;<br /><br /><br /><br /><br /> bottom:5px;<br /><br /><br /><br /><br /> z-index:1;<br /><br /><br /><br /><br /> background-image: url(“http://example.com/top.png”);<br /><br /><br /><br /><br /> background-repeat:no-repeat;<br /><br /><br /><br /><br /> display:none;<br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br />

 

در اینجا باید آدرس تصویر را در خط ۸ با آدرس تصویر خود جایگزین کنید. یعنی آدرس http://example.com/top.png را به طور کامل حذف کرده و آدرس کامل تصویر خود را که در مرحله ی قبل به دست آورده اید جایگزین کنید.
اگر بجای استفاده از تصاویر از پیش آماده ای که در این آموزش در اختیار شما قرار دادیم، از تصویری با اندازه ی دیگر استفاده کرده اید (مثلا ممکن است دلتان خواسته باشد از تصویر یک موشک و … استفاده کنید) در این مرحله باید سایز تعریف شده در خط های ۲ و ۳ را مطابق با اندازه ی تصویرتان تغییر دهید.
در آخر ذخیره فایل فراموش نشود.

ویرایش فایل functions.php

حالا که همه چیز به خوبی انجام شد، نوبت به ویرایش فایل functions.php میرسد. فایل توابع قالبتان را برای ویرایش باز کنید و کد زیر را جایی بین دو تگ شروع و پایان php قرار دهید (یعنی بعد از <?php و قبل از ?> ) عموما بهترین کار این است که این کد در پایان فایل توابع قرار بگیرد تا از ایجاد تداخل با سایر کد ها جلوگیری شود:
<br /><br /><br /><br /> function my_scripts_method() {<br /><br /><br /><br /> wp_enqueue_script(<br /><br /><br /><br /> ‘custom-script’,<br /><br /><br /><br /> get_stylesheet_directory_uri() . ‘/js/topbutton.js’,<br /><br /><br /><br /> array( ‘jquery’ )<br /><br /><br /><br /> );<br /><br /><br /><br /> }</p><br /><br /><br /> <p>add_action( ‘wp_enqueue_scripts’, ‘my_scripts_method’ );<br /><br /><br /><br />

 

توجه داشته باشید که در خط ۴ در صورتی که فایل js خود را در محل دیگری آپلود کرده اید، باید بر اساس محل اپلود، آدرس را تغییر دهید. در این خط از آدرس نسبی استفاده شده و نباید ادرس کامل در این محل وارد شود. اگر هم فایل topbutton.js را در همان محلی که گفته شد قرار داده اید که نیازی به نگرانی و تغییر نیست.
در پایان تغییرات را در فایل functions.php ذخیره کنید.

قرار دادن دکمه بازگشت به بالا در قالب

خوب، حالا به آخرین مرحله میرسیم. در این مرحله قرار است که دکمه ای که ایجاد کرده ایم را در سایت بگذاریم. فایل footer.php قالبتان را برای ویرایش باز کنید و کد زیر را در محلی بین شروع div فوتر و پایان آن قرار دهید. توجه کنید که کد باید جایی قبل از تگ پایان </body> قرار گرفته باشد.
<br /><br /><br /> <a href=”#” class=”topbutton”></a><br /><br /><br />

 

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

قدم آخر

اگر مراحل را به درستی دنبال کرده باشید، کافی است وبسایتتان را باز کنید (شاید نیاز باشد با ترکیب دکمه های ctrl+f5 کش مرورگر را خالی کنید) و کمی به پایین اسکرول کنید تا دکمه ی بازگشت به بالا برای شما پدیدار شود. سرعت نمایان شدن و مخفی شدن دکمه را نیز میتوانید با تغییر مقادیر توضیه داده شده در فایل js سفارشی کنید تا همه چیز دقیقا به شکلی که شما مایلید نمایش داده شود.

سخن آخر

اگر میخواهید دکمه بازگشت به بالا را در سایتی قرار دهید که وردپرسی نیست، مراحل کاملا مشابه خواهد بود. با این تفاوت که بجای اینکه فایل topbutton.js را در فایل functions.php فراخوانی کنید، باید آن را با تگ <script> و در سربرگ سایتتان فراخوانی نمایید. بقیه ی مراحل تقریبا یکسان خواهند بود.
احتمالا این نکته را هم میدانید که هیچ اجباری نیست برای دکمه بازگشت به بالا از تصویر استفاده کنید. اگر اندکی با css و html آشننایی داشته باشید، به سادگی میتوانید دکمه ی بازگشت به بالا را با استفاده از نوشته یا آیکن های Font Awesome و … ایجاد کنید.

سعی کنید دکمه ای که برای بازگشت به بالا انتخاب میکنید خیلی بزرگ نباشد. اندازه ۵۰ در ۵۰ برای این دکمه سایز مناسبی است. حال با توجه به تصویر انتخابی ایرادی ندارد اگر ارتفاع تصویر مثلا ۱۰۰ هم باشد (مثل تصویر یک موشک) ولی استفاده از اندازه های بزرگتر را به شما پیشنهاد نمیکنم. البته بدیهی است، مهم ترین چیز، هماهنگی دکمه ی استفاده شده، با طراحی و ترکیب بندی سایز شماست و نمیتوان یک استاندارد کلی برای این امر در نظر گرفت.

امیدواریم از این آموزش لذت برده باشید.