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

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

education-code-to-the-top-parswp

نحوه ایجاد دکمه رفتن به بالای صفحه (go to top) با جاوا اسکریپت

یکی از کاربردهای جاوا اسکریپت (javascript) در صفحات وب، امکان ایجاد دکمه های کنترلی برای راحتی هر چه بیشتر کاربران، مخصوصا در مورد صفحاتی است که ارتفاع زیادی دارند، از طرفی برخی از طراحان وب علاقمندند که به جهت زیباتر شدن قالب هایشان از این نوع تکنیک ها استفاده نمایند؛ اگر چه برخی ترجیح می دهند از توابع و کتابخانه های جی کئوری (jquery) به جای توابع ساده جاوا اسکریپت بدین منظور استفاده کنند، اما متاسفانه معمولا حاصل کار ایجاد صفحاتی حجیم و در نهایت کندی بارگذاری سایت یا وبلاگ و افزایش استفاده از پهنای باند سرور است؛ به هر صورت در این مطلب قصد داریم انجام این کار را به شما عزیزان آموزش دهیم.

ابتدا در قسمت هدر سایت خود (بین تگ های <head> و <head/>) کتابخانه جی کوئری را ایمپورت کنید (می توانید از فایل و سرور خود نیز استفاده کنید) :

دانلود کنید : لینک دانلود جی کوئری

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/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() > 1000) {
 $('#back-top').fadeIn();
 } else {
 $('#back-top').fadeOut();
 }
 });
 // scroll body to 0px on click
 $('#back-top a').click(function () {
 $('body,html').animate({
 scrollTop: 0
 }, ۸۰۰);
 return false;
 });
 });

});
//]]>
</script>

سپس استایل css زیر را در صفحه خود ایمپورت نمائید یا بین تگ <style> و <style/> کپی کنید (می توانید آن را مطابق سلیقه خود ویرایش نمائید) :

<style type="text/css">
#back-top {
 position: fixed;
 bottom: 10px;
 margin-left: -150px;
}
#back-top a {
 width: 108px;
 display: block;
 text-align: center;
 text-decoration: none;
 color: #bbb;
 /* background color transition */
 -webkit-transition: 1s;
 -moz-transition: 1s;
 transition: 1s;
}
#back-top a:hover {
 color: #000;
}
/* arrow icon (span tag) */
#back-top span {
 width: 108px;
 height: 108px;
 display: block;
 margin-bottom: 7px;
 background: #ddd url(up-arrow.png) no-repeat center center;
 /* rounded corners */
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 15px;
 /* background color transition */
 -webkit-transition: 1s;
 -moz-transition: 1s;
 transition: 1s;
}
#back-top a:hover span {
 background-color: #777;
}
</style>

حال در بالاترین قسمت صفحه بعد از تگ body یک بلاک با آی دی top بسازید، به طور مثال :

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

اکنون در پائین ترین قسمت صفحه قبل از تگ <body/> کد زیر را جهت نمایش دکمه قرار دهید :

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

نمونه همین کد را با کمی تغییرات در استایل می توانید در سایت پارس وی پی مشاهده نمائید. امیدواریم این آموزش مورد توجه شما قرار گرفته باشد.

حتما بخوانید : جستجو در وردپرس بصورت ایجکسی

نتیجه گیری :

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

اشتراک گذاری :
مطالب زیر را حتما بخوانید

درج خودکار qr code در مطالب وردپرس

درج خودکار qr code در مطالب وردپرس درج خودکار qr code اگر شما هم صاحب سایت دانلود نرم ...

مدت زمان گذشته از تاریخ انتشار مطلب در وردپرس

نمایش مدت زمان گذشته از تاریخ انتشار مطلب امروز می خواهیم نحوه قرار داددن زمان گذشته ...

بستن حساب کاربری افراد در وردپرس با Account Locker Lite

بستن حساب کاربری افراد در وردپرس مدیریت کاربران یک سایت مخصوصا سایت هایی که کاربران ...

دیدگاه کاربران
نظرات کاربران برای این مطلب را دنبال کنید


برای نمایش دیدگاه کلیک کنید
    ۰ دیدگاه ثبت شده
اطلاعات پست

۳۱۵۰

بازدید

۰

دیدگاه

0

علاقه مندی

5 از 1 رای