تبلیغات
حراجی دامنه های ویژهمشاهده
تبلیغات
تبلیغات تبلیغات

افزودن اسکرول به بالا با استفاده از jQuery

آموزش ها , مقالات,آموزش,ترفند , وردپرس

افزودن اسکرول به بالا با استفاده از jQuery

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

 

یادداشت: این آموزش برای کاربران متوسط که در ویرایش قالب خود راحت هستند میباشد. اگر میخواهید از روش افزونه استفاده کنید از smooth page scroll to top plugin استفاده کنید. کسانیکه میخواهند بدون استفاده از افزونه این کار را انجام دهند ادامه این آموزش را مطالعه کنند.

 

اسکرول روان چیست و چه زمانی استفاده میشود؟

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

 

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

دانلود


هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
مطلب مفیدی بود ؟

درخواست نصب

نویسنده : تیم محتوای 20اسکریپت 0 آموزش ها , مقالات,آموزش,ترفند , وردپرس
لینک کوتاه مطلب : https://www.20script.ir/?p=47098
کلمات کلیدی پست :
مطالب مرتبط
5,492افزونه پیشرفته سازی بخش نظرات وردپرس Comments Plus تاریخ : 2017/10/8
32,768دانلود قالب وردپرس حرفه ای و چند منظوره Elision تاریخ : 2015/08/6
3,152حذف فیلد آدرس از نظرات وردپرس تاریخ : 2018/04/6
4,604آموزش معرفی سایت وردپرسی به بینگ تاریخ : 2019/10/8
6,582افزونه اتصال هاست دانلود به وردپرس Hacklog Remote Attachment تاریخ : 2018/01/5
3,193جلوگیری از ورود با ایمیل جهت افزایش امنیت وردپرس تاریخ : 2017/01/11
4,754افزونه فارسی مدیریت زمینه دلخواه وردپرس نسخه حرفه ای ۵.۱.۵ تاریخ : 2015/01/13
1,796وردپرس یا Medium؟ کدام یک بهتر است؟ تاریخ : 2019/11/7
11,436قالب قبلی تولز دی ال ویژه برای وردپرس تاریخ : 2013/10/19
6,101قطعه کدهای کاربردی برای بخش نظرات وردپرس تاریخ : 2017/09/2
9,288افزایش امنیت وردپرس با اصلی ترین کد های htaccess تاریخ : 2016/06/27
1,472جلوگیری از دزدی تصاویر سایت وردپرسی تاریخ : 2019/11/16
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب
تبلیغات
تبلیغات