اضافة سهم الصعود إلى بداية صفحة المدونة

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

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

1. الان قم بالدخول إلى لوحة تحكم المدونة
2. اختر قالب 
3. ثم انقر فوق تحرير HTML

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

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

و الان  ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه

/* Back Top */
.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;
}

ابحث عن الوسم </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>

معاينة

لإضافته مع تأثير الإرتداد اضف الكود التالي بدلا من الكود السابق

<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').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>

معاينة

هذا كل شيء اي سؤال او استفسار لا تترد بوضعه في تعليق بالتوفيق

11/02/2014

مواضيع ذات صلة

اضافة سهم الصعود إلى بداية صفحة المدونة

4 / 5

بواسطة مدون محترف

مدون محترف 11/02/2014 18 تعليقات