أضافة النسبة المئوية في شريط التمرير - هذه الاضافه طلبت من كثيرا هنا لذابك سوف اقدمها لكم،كما يعلم اكثركم ان هذه الاضافه بقالب فكرة مين الرائع اظن ان اغلبكم شاهدها على مدونات اخرى .
هي اضافه جميله وخفيه تعطي جماليه في مدونتك على الشريط الجانبي ،وهي مفيدة لزوار مدونتك اذ يتمكن الزائر من معرفه نهاية وطول محتوى الصفحه لانها عندما يمرر لاسفل الصفحه ينتهى العد الى 100% وعندما يصعد الى الاعلى يعد عد تنازلي من 100 الى 0% .
- اذهب الى تحرير لقالب
- اذهب الى تحرير لقالب ]]></b:skin> واضف قبله/فوقه الكود التالي
#scroll { display:none; position:fixed; top:0; right:15px; z-index:500; padding:3px 8px; background-color:#32C2A5; 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; }
*الاكواد المحدده بالون الاحمر هي خاصه بلون الاداة ، يمكنك تغيرها ان اردت
- قم باضافة الكود لتالي بعد/اسفل <body> مباشره
<div id='scroll'></div>
الخطوة الاخيره اضف الكود التالي فوق/قبل
| <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> |
ان واجهت اي مشاكل فباب التعليقات مفتوح . . . بالتوفيق 😍
اعمر سهيل
اعمرسهيل : الجزائر ,قع ومواكبة كل ماهو جديد في عالم التقنيه , انقل قالبا ما اراه مفيد ومناسب للزوار , وايضا اطرح المواضيع الحصريه والمفيده للكل بأذن الله ..
يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
3للتبليغ عن رابط لا يعمل او مشكل في الموقع من هنا الطلب
4لطلب خدمة التبادل الاعلاني المطور من هنا