چگونه در جی کوئری دکمه رفتن به بالای صفحه را بسازیم؟

در این مقاله از دکتر گرافیک، به سوال پرتکرار “چگونه در جی کوئری دکمه رفتن به بالای صفحه را بسازیم؟” پاسخ خواهیم داد.

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

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

این کار باعث می‌شود که کاربران تجربه کاربری بهتری در سایت داشته باشند و به همین دلیل بسیار مهم است. چراکه باعث راحتی کار کاربران می‌شود.

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

کاربرد دکمه اسکرول به بالای صفحه

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

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

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

چگونه در جی کوئری دکمه رفتن به بالای صفحه را بسازیم؟

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

درواقع افزودن اسکرول به بالا زمانیکه صفحه طولانی دارید و می‌خواهید به‌راحتی به بالای صفحه برگردید مفید است. به همین دلیل و به دلیل استفاده زیاد آن در سایت در این مقاله ما به شما نحوه‌ی افزودن اسکرول به بالا با استفاده از JQuery را آموزش می‌دهیم.

کد اسکرول به بالای صفحه

وقتی پست دارای محتوای زیادی باشد، کاربران برای خواندن محتواها مجبورند اسکرول را به پایین بیاورند. با اسکرول به پایین تمام لینک‌های ناوبری به بالا میرند. زمانی که کاربران مقاله میخونن نیاز دارن به بالا رفته و عملیات وب‌سایت شما را ببینند. دکمه‌ی Scroll To Top کاربران را به‌سرعت به بالای صفحه می‌برد. شما میتونید این کار را بدون استفاده از JQuery و با استفاده از لینک متن زیر انجام دهید:

<a href="#" title="Back to top">^Top</a>

کار این لینک فقط بردن کاربران به بالای صفحه با سرعت زیاد می‌باشد. این مورد کاربردی است. اما مانند یک دست‌انداز در جاده است. Smooth Scroll دقیقاً مخالف این مورد است. این اسکرول به نرمی کاربر را بالای صفحه می‌برد. درواقع انجام این کار باعث ایجاد یک اثر زیبا و بهبود تجربه کاربر می‌شود.

کد JQuery رفتن به بالای صفحه

برای افزودن این اسکرول از JQuery کدهای CSS و HTML در قالب وردپرس استفاده خواهیم کرد. ابتدا ویرایشگر متن را بازکنید سپس یک فایل ایجاد کرده و با نام Smoothscroll.js ذخیره کرده و کد زیر را در فایل کپی کنید:

jQuery(document).ready(function($){
$(window).scroll(function(){
if ($(this).scrollTop() < 200) {
$('#smoothup') .fadeOut();
} else {
$('#smoothup') .fadeIn();
}
});
$('#smoothup').on('click', function(){
$('html, body').animate({scrollTop:0}, 'fast');
return false;
});
});

سپس فایل را ذخیره کرده و آن را در دایرکتوری قالب /JS/ آپلود کنید. اگر قالب شما دایرکتوری /JS/ را ندارد یک دایرکتوری ایجاد کرده و Smoothscroll.js را در آن آپلود کنید. این کد اسکریپت جی کوئری است که اسکرول‌‌‌‌‌های مؤثر را به‌عنوان یک دکمه که کاربران را به بالای صفحه ببرد اضافه می‌کند.

افزودن Smoothscroll.js به قالب

گام بعدی افزودن Smoothscroll.js به قالب است. برای انجام این کار باید کد زیر را به فایل functions.php اضافه کنید:

wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '',  true );

در کد بالا به وردپرس گفته می‌شود که اسکریپت را بارگذاری کند. همچنین کتابخانه جی کوئری را از آنجا که افزونه‌ها وابسته به آن هستند بارگذاری کند. اکنون‌که JQuery را اضافه کرده‌ایم یک لینک به سایت وردپرس که کاربران را به بالای صفحه ببرد اضافه می‌کنیم.

کد HTML را به فایل قالب Footer.php اضافه کنید:

<a href="#top" id="smoothup" title="Back to top"></a>

همانطور که متوجه شدید یک لینک اضافه کردیم. اما با هر متنی در ارتباط نیست. دلیل آن هم استفاده از یک آیکون تصویر با فلش را به بالا برای بازگشت به بالای صفحه می‌باشد. در این مثال از آیکون 40x40px استفاده کرده‌ایم. آن را به قالب خود اضافه کنید:

#smoothup {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("http://www.example.com/wp-content/uploads/2013/07/top_icon.png");
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s; transition-duration: 0.4s;
}

#smoothup:hover {
-webkit-transform: rotate(360deg) }
background: url('') no-repeat;
}

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

اسکرول به بالا به کاربر اجازه می‌دهد به‌راحتی به بالا رفته و هر چه می‌خواهد را در سایت بیابد. همچنین می‌توانید نوار شناور بالا و پایین صفحه را برای نمایش ویژگی محتوا اضافه کنید.

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

منابع: wikipedia – wordpress.org – mihanwp – youtube