ثبت‌نام ورود

افزودن دکمه رفتن به بالای صفحه با استفاده از JQuery

افزودن دکمه رفتن به بالای صفحه با استفاده از JQuery
افزودن دکمه رفتن به بالای صفحه با استفاده از JQuery

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

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

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

کاربرد دکمه پرش به بالای صفحه

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

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

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

افزودن دکمه رفتن به بالای صفحه با استفاده از JQuery

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

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

یادداشت: این آموزش برای کاربران متوسط که در ویرایش قالب خود راحت هستند می‌باشد. اگر می‌خواهید از روش افزونه استفاده کنید از Smooth Page Scroll To Top Plugin استفاده کنید. کسانی‌‌‌‌‌که می‌خواهند بدون استفاده از افزونه این کار رو انجام بدن ادامه این آموزش رو مطالعه کنند.

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

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

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

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

کمی CSS برای زیبایی بیشتر

برای افزودن این اسکرول از 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 به قالب است. برای انجام این کار باید کد زیر رو به فایل قالب 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 برای دکمه که هنگامی‌که کاربر ماوس رو روی دکمه می‌برد دکمه بچرخد اضافه کرده‌ایم.

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

موفق و پیروز باشید. 🙂

نظر شما در این‌باره چیست؟