طريقة إضافة النسبة المئوية بجانب شريط التمرير على البلوجر

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

إبحث عن ]]></b:skin> وضع هذا كود أسفله

#scroll { display:none; position:fixed; top:0; right:15px; z-index:500; padding:3px 8px; background-color:#369fcf; color:#fff; border-radius:3px; font-size:14px; } #scroll:after { content: " "; position: absolute; top:50%; right:-10px; height:0; width:0; margin-top:-6px; border:6px solid transparent; border-left-color:#369fcf; }

و بعد ذلك إبحث عن <head/> وضع  هذا كود أسفله

<div id='scroll'> </div>

وثم أبحث عن </body> وضع هدا كود أسفله

<script type='text/javascript'> //<![CDATA[ var scrollTimer = null; $(window).scroll(function() { var viewportHeight = $(this).height(), scrollbarHeight = viewportHeight / $(document).height() * viewportHeight, progress = $(this).scrollTop() / ($(document).height() - viewportHeight), distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2; $('#scroll') .css('top', distance) .text(' (' + Math.round(progress * 100) + '%)') .fadeIn(600); if (scrollTimer !== null) { clearTimeout(scrollTimer); } scrollTimer = setTimeout(function() { $('#scroll').fadeOut(600); }, 1000); }); //]]> </script>

مدير الموقع

تطوير المواقع والبرمجة وامن المعلوميات

فيسبوك

تويتر

انستغرام

شارك هذا المنشور

اشترك في بريدنا الالكتروني لتتوصل باشعار فور نشر موضوع جديد

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