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

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

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

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>

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

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

إرسال تعليق