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

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

اسکورل اتوماتیک یه بالای صفحه چیست؟

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

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

افزودن لینک به بالای صفحه

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

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

افزودن اسکورل به بالای صفحه با 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 قرار دهید. اگر قالب شما همچین پوشه ای ندارد میتوانید آن را ایجاد نمایید، برای دسترسی به فایل های سایت خود میتوانید به مطلب ” بهترین نرم افزار های FTP Client برای مک و ویندوز” مراجعه نمایید. اکنون باید فایل بالا را به قالب خود اضافه نمایید. برای انجام این کار کافیست تا کد زیر را در فایل توابع وردپرس قرار دهید:

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

کد بالا ایکریپت قبل را بارگذاری می نماید. اکنون وقت آن است که کد های HTML را به فایل فوتر سایت خود اضافه نماییم، کافیست کد زیر را در فایل footer.php قرار دهید:

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

کد بالا یک لینک که دارای یک آیکون فلش است اضافه مینماید، که شما باید تصویر خود را با سایز 40*40 پیکسل به سایت خود آپلود نمایید، سپس کد زیر را به قالب خود اضافه نمایید:

#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;
}

دقت داشته باشید که کد بالا را باید به فایل Stylesheet یعنی فایل style.css قالب خود اضافه نمایید. در خط 9 از کد آدرس تصویری که آپلود نموده اید قرار میگیرد.

تبریک! شما توانستید دکمه اسکورل به بالای صفحه را به سایت خود اضافه نمایید.