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

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

اترككم الان مع المعاينة والشرح

معاينة

طريقة التركيب
1. اذهب الى تحرير لقالب
2. باستعمال CTRL+F قم بالبحث عن ]]></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;
}

*الاكواد المحدده بالون الاحمر هي خاصه بلون الاداة ، يمكنك تغيرها ان اردت

3. قم باضافة الكود لتالي بعد/اسفل <body> مباشره



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

4. الخطوة الاخيره اضف الكود التالي فوق/قبل </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>

ان واجهت اي مشاكل فباب التعليقات مفتوح . . . بالتوفيق 😍

أضافة النسبة المئوية في شريط التمرير - هذه الاضافه طلبت من كثيرا هنا لذالك سوف اقدمها لكم،كما يعلم اكثركم ان هذه الاضافه بقالب فكرة مين...

رابط
HTML
BBCode

رابط

HTML

BBCode

معلومات عن التدوينة

عدد التعليقات: 2

بتاريخ : 6/03/2016

للإبلاغ عن رابط معطوب اضغط هنا

أن يكون التعليق خاص بمحتوى التدوينة	1
أن لا تضع أي روابط خارجية	2
لإضافة كود حوله أولاً بمحول الأكواد	3
أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة	4

القيسي ويب

روابط الموضوع للنسخ

يسمح بنقل الموضوع لكن مع ذكر المصدر في نهاية الموضوع المنقول ووضع رابط الموضوع الأصلي

معلومات عن التدوينة

اسعد القيسي

2 تعليقات

contact-us

القيسي ويب

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

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