اضافة الصعود للأعلى بتأثير خلاب

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

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

1 . نتوجه لقالب >> تحرير 

2. ابحث بإستعمال CTRL+F عن  <head/>

3. ضع الكود التالي قبله [ فوقه ]

  * لتغير الإتجاه غير ما لونه بالأصفر إلى : right

<style>

/* CSS Bounce To Top  */

#BounceToTop{background:#fff;text-align:center;position:fixed;bottom:50%;left:20px;cursor:pointer;width:40px;height:40px;padding:5px;display:none;border:1px solid #e0e0e0;opacity:0.8;transition:all .3s ease-out}
#BounceToTop:hover{background:#fff;border:1px solid #0f9abb;opacity:1;}

ock;border:2px solid #888;border-left-width:0;border-bottom-width:0;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);position:absolute;top:20px;left:14px;opacity:0.8;}
#BounceToTop:hover:before{content:&#39;&#39;;height:20px;width:20px;dis
#BounceToTop:before{content:&#39;&#39;;height:20px;width:20px;display:b
lplay:block;border:2px solid #0fa9cd;border-left-width:0;border-bottom-width:0;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);position:absolute;opacity:1;}


</style>

4. ابحث عن <body/>

5. ضع الكود التالي قبله [ فوقه ]

<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()&gt;100) { $(&#39;#BounceToTop&#39;).fadeIn(); } else { $(&#39;#BounceToTop&#39;).fadeOut(); } });
$(&#39;#BounceToTop&#39;).click(function() { $(&#39;body,html&#39;).animate({scrollTop:0},600) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:0},50); }); });
</script>
<div class='animated fadeInRightBig' id='BounceToTop'/>
        <script class='jshilang'>
          $( &quot;.wixposts&quot; ).hover(
            function() {
              $( this ).addClass( &quot;actred&quot; );
            }, function() {
              $( this ).removeClass( &quot;actred&quot; );
            }
          );
          //Image Hover
          //$( &quot;.pagenavi&quot; ).after( $( &quot;#centent&quot; ) );
        </script>

 8. وأخيرا يمكنك الحفظ ومبروك عليك الإضافة 

عزيزي الزائر إذا كنت مستفيد من هذه التدوينة فلا تبخل علينا بمشاركة أو تعليق