EnglishFrenchGermanSpainItalianDutchRussianPortugueseArabic

خاصية الرجوع لأعلى الصفحة لمدونات بلوجر بشكلين

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

خاصية الرجوع لأعلى الصفحة لمدونات بلوجر بشكلين

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

لتركيب خاصية الصعود لأعلى الصفحة قم بعمل الخطوات التالية :

أولا إضافة مكتبة الخطوط المميزة وستفيدك في أشياء اخرى إن شاء الله

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

ضعها فوق وسم </head>

تانيا قم بنسخ الكود التالي :

.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;
}


ثم ضعه فوق وسم ]]></b:skin>

بعد ذالك ناتي لإختيار الشكل الذي يناسب ولانه ليس لدي الوقت لعمل معاينة حية يمكنك تجريب كل واحد على حدا وإختيار الشكل الذي يناسبك

الشكل الاول

<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>


بعد ان تختار الشكل ضعه مباشرة فوق وسم </body>

هذا كل شيئ بخصوص هذه الإضافاة لو لديك أي استفسار أو سؤال يمكنك وضعه في ركن الدعم الفني وفقنا الله وإياكم لما يحب ويرضى

ليست هناك تعليقات:

إرسال تعليق

التالي السابق الرئيسية