إضافة زر انتقل إلى الأعلى بتقنية CSS و Jquery

السلام عليكم ورحمة الله تعالى وباركته

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

• 

  إضافة زر انتقل إلى الأعلى بتقنية CSS و Jquery

•  اضافة متوافقة مع جميع المتصفحات لانها تستعمل تنكنولوجيا متطورة

   طريقة التركيب سهلة وليست معقدة

 

  لإضافة زر انتقل إلى الأعلى بتقنية CSS :

إذهب لتصميم >> تحرير HTML >> قم بالبحث عن </body> وأضف هذا الكود قبله

 

<a title="إلى أعلى" style="position: fixed; right: 15px; bottom: 15px; outline: medium none; border: 0px none;" href="#"><img border="0" alt="Back to TOP" src="http://i.imgur.com/Ffb7p.png"></a>

  

  لإضافة زر انتقل إلى الأعلى بتقنية Jquery:

إذهب لتصميم >> تحرير HTML >> قم بالبحث عن </body> وأضف هذا الكود قبله

<style type="text/css">#w2b-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;} </style><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script><script type='text/javascript'>$(function() { $.fn.scrollToTop = function() { $(this).hide().removeAttr("href"); if ($(window).scrollTop() != "0") { $(this).fadeIn("slow") } var scrollDiv = $(this); $(window).scroll(function() { if ($(window).scrollTop() == "0") { $(scrollDiv).fadeOut("slow") } else { $(scrollDiv).fadeIn("slow") } }); $(this).click(function() { $("html, body").animate({ scrollTop: 0 }, "slow") }) } }); $(function() { $("#w2b-StoTop").scrollToTop(); }); </script><a href='#' id='w2b-StoTop' style='display:none;'>إلى أعلى الصفحة </a>

يمكنك تخصيص اضافتك الجديدة و استبدال النص بصورة أيضا.

 لقد انتهيت! سانتظر ردودكم واستفساراتكم

منشورة في: اضافات وادوات بلوجر, بلوجر, css, jQuery