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

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

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

ساتركك تكتشف تأثير كل واحد بنفسك

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

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

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

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