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





وینگو مارکت
تبلیغات
تبلیغات
تبلیغات تبلیغات
تبلیغات تبلیغات

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

 

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

این محتوا چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 5 / 5. تعداد رای : 1

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

دانلود

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

خرید ارز
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 وردپرس , آموزش ها , مقالات,آموزش,ترفند
لینک کوتاه مطلب : https://www.20script.ir/?p=47098
کلمات کلیدی پست :
مطالب مرتبط
14,012نمایش فایل‌های ویدئویی در وردپرس با افزونه Spider Video Player تاریخ : 2018/04/23
8,924آموزش رفع خطای Missing a temporary folder در وردپرس تاریخ : 2019/07/4
7,468مشاهده فایل های pdf در وردپرس با استفاده از گوگل تاریخ : 2019/05/2
13,728افزونه ایجاد صفحه معرفی اعضای تیم در وردپرس The Team Pro تاریخ : 2017/12/1
6,800آموزش تغییر آدرس نویسنده در وردپرس تاریخ : 2019/04/29
23,136افزونه ایجاد صفحه : در حال بروزرسانی هستیم + آموزش تاریخ : 2014/10/19
43,824افزونه رزرو وقت ملاقات بوکد فارسی Booked نسخه 2.0.6 تاریخ : 2017/10/31
13,902آموزش تبدیل قالب HTML به قالب وردپرس تاریخ : 2018/02/16
15,332آموزش اجرای کدهای php در مطالب وردپرس تاریخ : 2019/11/19
4,472نحوه سازماندهی مجدد یا تغییر ترتیب صفحات وردپرس با کشیدن و رها کردن تاریخ : 2022/06/18
11,360دور زدن تحریم نقشه گوگل در دامنه IR تاریخ : 2018/06/14
17,037وردپرس 4.6 منتشر شد تاریخ : 2016/08/19
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب