أضافة النسبه المؤويه فى شريط التمرير

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

كل عام وانتم بخير وأحسن صحه

لقد رأيت الكثير يبحثون عن أضافة النسبه المؤويه فى شريط التمرير الجانبى وقد قمت بعمل شرح عن طريقة أضافة هذه الاضافه بطيريقة سهله وبدون تعقيدات

المثال المباشر

طريقة التثبيت:

1. ضع الكود التالى أعلى

رمز Code:

]]> </ b: skin>

رمز Code:

#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;
}

2. أضف كود الاستدعاء التالى أسفل الكود

رمز Code:

</ head>

رمز Code:

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

3.أضف الكود التالى أعلى

رمز Code:

</ body>

رمز Code:

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

4.أحفظ القالب وهنيئا لك الاضافة الجديد

أى مشكله أو أستفسار انا فى الخدمه وشكرا