إضافة زر الصعود للأعلى

 السلام عليكم .... �� , دائماً ما نبحث عل اضافات �� جديدة لمدونتنا لجعلها جميلة  وانيقه ورائعه ⭐ حتى إن تواجدت فلا بد أنك تفكر بتغييرها لتحديث أجمل وأفضل، وهذا ما سنتطرق إليه في هذه التدوينة ، اليوم جلبت لكم اضافه جديدة ورائعه سوف تضعونها فى مدونتكم , وهوه زر صعود للأعلى وهو زر لا غنى عنه يُسهل على المتصفح العودة لأعلى الصفحة بسهولة وسرعة تامة بشكل جميل
كي لا نطيل عليكم تفضلو بالمعاينة �� وبعدها الي شرح التركيب

شرح طريقة التركيب

1. توجه لقالب >> تحرير 
2. ابحث بإستعمال Ctrl+F عن <head/> ثم ضع الكود التالي فوقه

* الكود هو فقط لإظهار الأيقونة إذا كنت تتوفر عليه فلا داعي لإضافته

الكود

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
3. ابحث عن ]]></b:skin ثم ضع الكود التالي فوقه

الكود

.smoothscroll-top {
    position:fixed;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    text-align:center;
    z-index:99;
    background-color:#2ba6e1;
    color:#fff;
    width:47px;
    height:44px;
    line-height:44px;
    right:25px;
    bottom:-25px;
    padding-top:2px;
    border-radius:5px;
    transition:all 0.5s ease-in-out;
    transition-delay:0.2s;
}
.smoothscroll-top:hover {
    background-color:#3eb2ea;
    color:#fff;
    transition:all 0.2s ease-in-out;
    transition-delay:0s;
}
.smoothscroll-top.show {
    visibility:visible;
    cursor:pointer;
    opacity:1;
    bottom:25px;
}
.smoothscroll-top i.fa {
    line-height:inherit;
}

4. ابحث عن <body/> ثم ضع الكود التالي فوقه

الكود

<div class="smoothscroll-top">
<span class="scroll-top-inner">
<i class="fa fa-2x fa-arrow-circle-up"></i>
</span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){ 
$(document).on( 'scroll', function(){
if ($(window).scrollTop() > 100) {
$('.smoothscroll-top').addClass('show');
} else {
$('.smoothscroll-top').removeClass('show');
}
}); 
$('.smoothscroll-top').on('click', scrollToTop);
}); 
function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>

وبعد اكمال هذه الطريقه سوف تحصلون على زر صعود للأعلى احترافى وجميل ��

لا تنسا ان تكن من أعضاء المدونة من هنا , إذا واجهتك اي مشكلة لا تترد فى ترك تعليق
مشاركة المقال على :

التعليقات

لا توجد تعليقات حتى الآن، كن أول من يعلق

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة

اقتباس لنزار قباني

هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.

للدخول الى الصفحة اضغط هنا

المشاركات الشائعة

أحدث التعليقات