آموزش اسکریپت و وردپرس

رفتن به ابتدای صفحه در وردپرس با جاوا اسکریپت - فرساد گشت

امام حسین (ع) : بخشنده ترین مردم کسی است که در هنگام قدرت می بخشد.
چهارشنبه ۲ مرداد ۱۳۹۸

رفتن به ابتدای صفحه در وردپرس با جاوا اسکریپت

دسته بندی : مقالات آموزشی تاریخ : شنبه ۳۱ فروردین ۱۳۹۸


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

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

رفتن به ابتدای صفحه در وردپرس

رفتن به ابتدای صفحه

برای شروع کار ابتدا لازم است تا کتابخانه جی‌کوئری را به سایت خود اضافه کنید، برای این منظور فایل header.php قالب خود را باز کرده و کد زیر را در مکان مناسبی بین کد </head><head> قرار دهید.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/۱.۴.۳/jquery.min.js"></script>

سپس پس از کد فوق قطعه کدهای زیر را نیز قرار داده و فایل را ذخیره کنید.

<script type="text/javascript">
//<![CDATA[
$(document).ready(function()
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () 
$(window).scroll(function () 
if ($(this).scrollTop() > ۱۰۰۰) 
$('#back-top').fadeIn();
 else 
$('#back-top').fadeOut();

);
// scroll body to ۰px on click
$('#back-top a').click(function () 
$('body,html').animate(
scrollTop: ۰
, ۸۰۰);
return false;
);
);
);
//]]>
</script>

در مرحله بعد لازم است تا تغییرات مربوط به استایل را برای دکمه بالا رفتن در وردپرس اعمال کنید، برای این منظور فایل style.css را در قالب خود باز کرده و کدهای زیر را در آن قرار دهید.

#back-top 
position: fixed;
bottom: ۱۰px;
margin-left: -۱۵۰px;

#back-top a 
width: ۱۰۸px;
display: block;
text-align: center;
text-decoration: none;
color: #bbb;
/* background color transition */
-webkit-transition: ۱s;
-moz-transition: ۱s;
transition: ۱s;

#back-top a:hover 
color: #۰۰۰;

/* arrow icon (span tag) */
#back-top span 
width: ۱۰۸px;
height: ۱۰۸px;
display: block;
margin-bottom: ۷px;
background: #ddd url(up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: ۱۵px;
-moz-border-radius: ۱۵px;
border-radius: ۱۵px;
/* background color transition */
-webkit-transition: ۱s;
-moz-transition: ۱s;
transition: ۱s;

#back-top a:hover span 
background-color: #۷۷۷;

همانطور که در خط ۲۶ این کد مشاهده می‌کنید آدرس یک تصویر که مربوط به ایکن بالا رفتن در وردپرس می‌باشد قرار دارد، یک آیکون مناسب برای آن را نیز در پوشه اصلی قالب خود آپلود کرده و نام و فرمت آن را وارد کنید.

حال مجددا فایل header.php را باز کرده و کد زیر را بعد از تگ <body> در بالاترین بخش از آن قرار دهید.

<div id="top"></div>

در نهایت در انتهای همین فایل درست قبل از کد </body> قطعه کد زیر را برای نمایش دکمه بالا رفتن به ابتدای صفحه در وردپرس را قرار دهید.

<p style="display:block;" id="back-top">
<a href="#top"><span></span>رفتن به بالا</a>
</p>

پس از ذخیره فایل در نهایت دکمه‌ای در صفحات سایت برای بالارفتن در وردپرس نمایش داده خواهد شد.

The post رفتن به ابتدای صفحه در وردپرس با جاوا اسکریپت در سایت فراگشت برای شما عزیزان آماده شده است.

چه امتیازی می دهید؟
5 / 0
[ 0 رای ]


دسته بندی

مطالب محبوب
بک لینک ها