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

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

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>

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

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

نتیجه گیری :

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

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

درباره وردپرس ۴٫۰ بیشتر بدانیم

وردپرس ۴٫۰ منتشر شد! در حالی که نسخه اصلی است، بعضی از افراد بحث می کنند که نسخه ی ...

روش های جلوگیری از هک شدن وردپرس

جلوگیری از هک و ویروسی شدن وردپرس “هک و ویروسی شدن وردپرس”، شاید شنیده باشید که یک ...

افزونه ساخت فرم تماس با ما حرفه ای برای وردپرس

دوستان وردپرسی عزیز امروز افزونه ای رو به شما معرفی میکنیم که به کمک اون میتونید به ...

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


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

۳۱۴۰

بازدید

۰

دیدگاه

0

علاقه مندی

5 از 1 رای