خوش آمدید!

برای دریافت آخرین بروزرسانی‌های افزونه، استایل و ... نیازمند ثبت‌نام در انجمن می‌باشید تا با ما بروز بمانید!

ثبت نام!
آموزشهای وردپرس

WALKER

مدیر کل انجمن
تاریخ ثبت‌نام
11/13/18
نوشته‌ها
6,138
پسندها
5,586
امتیازها
113
محل سکونت
tehran
آنتی ویروس
2629

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

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

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

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

اسکرول بالا

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

اسکرول به بالا به کاربر اجازه میدهد براحتی به بالا رفته و هر چه میخواهد را در سایت بیابد. همچنین میتوانید نوار شناور بالا و پایین صفحه را برای نمایش ویژگی محتوا اضافه کنید.
 
ارسال کننده موضوعات مشابه انجمن پاسخ ها تاریخ
J مشکل بهم ریختن فرم در افزودن نوشته ها وردپرس 0
maede مباحث و مشکلات افزودن ویجت به صفحه اصلی پشتیبانی زنفورو 0
maede آموزش افزودن ابزارک (تولبار) به ادیتور متن در چتروم پشتیبانی زنفورو 2
I مباحث و مشکلات افزودن فونت به ادیتور زنفورو پشتیبانی زنفورو 5
sslri آموزش افزودن ابزارک تب بندی jQuery به وردپرس آموزشهای وردپرس 0
WALKER آموزش افزودن ssl و https به سایت وردپرسی آموزشهای وردپرس 0
WALKER آموزش افزودن آیکون دلخواه به پست تایپ های سفارشی آموزشهای وردپرس 0
WALKER آموزش افزودن فرم تماس بصورت پاپ آپ در وردپرس آموزشهای وردپرس 0
WALKER آموزش افزودن لینک سفارشی به نوار ابزار وردپرس آموزشهای وردپرس 0
WALKER آموزش افزودن جستجوی باز شونده به قالب وردپرس آموزشهای وردپرس 0
WALKER آموزش افزودن شماره تلفن قابل کلیک به سایت آموزشهای وردپرس 0
WALKER دانلود JetGuten - Blocks Set Addon for Gutenberg Editor v1.1.2 افزونه افزودن قابلیت های جدید به گوتنبرگ افزونه های وردپرس 0
WALKER آموزش افزودن فرمت مجاز برای آپلود در رسانه وردپرس آموزشهای وردپرس 0
WALKER آموزش افزودن تگ Hreflang به وردپرس برای افزایش سئو آموزشهای وردپرس 0
WALKER آموزش افزودن شماره صفحات به وردپرس بدون افزونه آموزشهای وردپرس 0
WALKER آموزش غیر فعال شدن دکمه افزودن پرونده چند رسانه‌ای در وردپرس آموزشهای وردپرس 0
WALKER آموزش افزودن شبکه‌های اجتماعی به منو سایت وردپرس آموزشهای وردپرس 0
WALKER آموزش افزودن آیکون به منوهای وردپرس آموزشهای وردپرس 0
WALKER دانلود افزودن مطلب توسط کاربر در وردپرس WP User Frontend Pro Business - Ultimate Frontend Solution For WordPress v3.4.1 افزونه های وردپرس 16
WALKER آموزش افزودن نمودار تغییرات قیمت محصولات به ووکامرس آموزشهای وردپرس 0
WALKER آموزش کد افزودن تصویر شاخص مطالب در پنل مدیریت وردپرس آموزشهای وردپرس 0
WALKER دانلود افزونه افزودن فیلد دلخواه در ووکامرس WooCommerce Checkout Fields & Fees v7.7 افزونه های وردپرس 10
Magical اندروید دانلود Add Music to Voice Premium 1.7 - نرم افزار افزودن موزیک به صدای ضبط شده برای اندروید نرم افزارهای اندروید 0
Magical اندروید دانلود Add Audio to Video: Music Video Editor Pro 1.7 - نرم افزار افزودن موزیک به ویدیو برای اندروید نرم افزارهای اندروید 0
Magical اندروید دانلود PixelLab - Text on pictures 1.9.2 - نرم افزار افزودن متن روی تصاویر برای اندروید نرم افزارهای اندروید 0
Magical اندروید دانلود Phonto Pro - Text on Photos 1.7.19 - نرم افزار افزودن متن به تصاویر برای اندروید نرم افزارهای اندروید 0
WALKER دانلود افزونه نمایش افکت بر اساس حرکت اسکرول در وردپرس Scroll Magic Wordpress - Scrolling Animation Builder Plugin v4.0.7.1 افزونه های وردپرس 34
WALKER دانلود افزونه اسکرول بی نهایت YITH Infinite Scrolling ووکامرس نسخه 1.3.0 افزونه های وردپرس 7
aylarma نحوه‌ی رسیدن به اکسپلور با لایک و ویو بالا گفتگوی آزاد 0
Z چگونه به اکسپلورر اینستاگرام برویم؟ گفتگوی آزاد 0
A اینفلوئنسرمارکینگ به چه دردمون در اینستاگرام میخورد گفتگوی آزاد 0
A دانلود فیلم و عکس از اینستاگرام به روش هایه ساده گفتگوی آزاد 0
B کارمزد کارت به کارت گفتگوی آزاد 1
M پرسرعت ترین راه برای ورود به YouTube گفتگوی آزاد 0
M آیا تا به حال آموزشگاه ها پول شما رو خوردند؟ گفتگوی آزاد 2
Ghre مباحث و مشکلات رفع مشکل قطع شدن فندق شکن به طور خودکار مباحث و مشکلات مربوط به اندروید 0
masoudfn اتصال درگاه پرداخت به سایت با php طراحی وب 0
Sajadmsd مشکل ورود به آپلودسنتر اخبار انجمن ای فری 2
A اعتراض به قیمت کلیک های شرکت های تبلیغاتی گفتگوی آزاد 6
mona.habibizadeh کاور کیبورد میانبر VIM چیزی که برنامه نویسان به دنبال آن می گردند آموزش های نرم افزار و سخت افزار 0
elinaz چطوری کلید افتاده شده رو به روش درست وصل کنیم آموزش های سخت افزار 0
sslri معرفی اسکریپت تماشای فیلم و نمایش تلویزیونی به صورت آنلاین موفلیکس MoFlix 1.0.1 اسکریپت 0
maede تغییرات قالب تعداد بازدید ها و پاسخ هارا به تاپیک های خود اضاف کنید آموزشهای زنفورو 0
elinaz اتصال گوشی اندروید به ویدئو پروژکتور با استفاده از کابل گفتگوی آزاد 0
mona.habibizadeh اجرای اندروید روی آیفون به کمک یک قاب محافظ آموزش های سخت افزار 0
maede افزون باکس های هشدار به صفحه اصلی انجمن پشتیبانی زنفورو 4
E آموزش ترفند تبدیل اپلیکیشن فروشگاهی به کاتالوگ گفتگوی آزاد 0
maede مباحث و مشکلات به هم ریختی اطلاعات کاربران در هنگام ارسال ها پشتیبانی زنفورو 4
maede تبدیل قالب html به وردپرس قالب های وردپرس 0
maede انتقال فایل های اپلود شده به هاست فایل در زنفور پشتیبانی زنفورو 10

موضوعات مشابه

بالا