زر الذهاب الى اعلى الصفحة بتقنية jQuery

اضافة زر الانتقال الى اعلى الصفحة لمدونة بلوجر

الاداة بسيطة جدا وهامة جدا للمدونات التى بها مواضيع طويلة مثل دروس بلوجر او شرح تقنيات بلوجر مثلا

عندما يصل الزائر الى اخر الموضع او المشاركة يظهر زر عند اسفل يمين الصفحة عند الضغط علية يقوم الزائر بالانتقال الى اعلى الصفحة بتاثير رائع , تختلف هذة الاداة عن غيرها لانها تعمل بتقنية jQuery  ولها تاثير اكثر من رائع ومتوافقة مع كافة متصفحات الانترنت .

لمعاينة الاداة اذهب الى اسفل المشاركة ليظهر الزر واضغط علية لمعاينة  تاثيرjQuery  

زر العودة الى اعلى الصفحة بتقنية jQuery  

شرح تركيب الاداة داخل قالب بلوجر فى خطوتين بسيطة وواضحة 

• الخطوة الاولى : اضافة كود CSS

ابحث عن الكود التالى 

]]></b:skin>

انسخ الكود التالى مباشرة اعلى او قبل الكود السابق 

#toTop {
display:none;
text-decoration:none;
position:fixed;
bottom:10px;

right:10px;

overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:-999px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhunwxpBysaJby5WHb-oMN14ilThlEdv8ViToe4BjN6uWCLXQcc80F9HhHJytOci3y8S-4D1JblR1NEI_cdwpD_Lt5ab5TtB-LLmcB6jf6jZJu6k-SLglVoR24r3CWBQJ05IOiTXb800Rg/s1600/ui.totop.png) no-repeat left top;
}
#toTopHover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhunwxpBysaJby5WHb-oMN14ilThlEdv8ViToe4BjN6uWCLXQcc80F9HhHJytOci3y8S-4D1JblR1NEI_cdwpD_Lt5ab5TtB-LLmcB6jf6jZJu6k-SLglVoR24r3CWBQJ05IOiTXb800Rg/s1600/ui.totop.png) no-repeat left -51px;
width:51px;
height:51px;
display:block;
overflow:hidden;
float:left;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
}
#toTop:active, #toTop:focus {
outline:none;
}

ملاحظة : يمكنك التحكم فى مكان ظهور الزر يمين الصفحة او يسار الصفحة بتغير القيم التالية فى كود CSS بالنسبة للاعدادات الافتراضية سوف يظهر الزر اسفل يمين الصفحة ., لتغيير المكان قوم بتغيير كلمة 

right   الى  left   فى السطر السادس المظلل بالازرق فى الكود السابق .

• الخطوة الثانية : اضافة سكريبت الاداة ومكتبة jQuery

ابحث عن الكود التالى 

</head>

انسخ الكود التالى مباشرة اعلى او قبل الكود السابق 

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>

<script src='http://suyb.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://suyb.googlecode.com/files/jquery.ui.totop.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
/*
var defaults = {
containerID: &#39;moccaUItoTop&#39;, // fading element id
containerHoverClass: &#39;moccaUIhover&#39;, // fading element hover class
scrollSpeed: 1200,
easingType: &#39;linear&#39; 
};
*/

$().UItoTop({ easingType: &#39;easeOutQuart&#39; });

});
</script>

ملاحظة : اذا كانت مدونتك بها مكتبة جى كويرى اذا قم بحذف السطر الاول  .

احفظ القالب وقم بمعاينة الاداة 

فى حال واجهت اى مشاكل لا تتردد فى السؤال واخذ المشورة  من خلال نموذج التعليقات اسفل المشاركات : )