Advanced Search

HTML5 Scrollbar Percentage Position using JavaScript

/ Published in: HTML
Save to your folder(s)
This JavaScript gets you the percentage position of the browser's scrollbar.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. 	<head>
  5. 		<meta charset="utf-8">
  6. 		<title>Get Scrollbar Percentage</title>
  7.  
  8. 		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  9.  
  10. 		<script>
  11.  
  12.  
  13. 			$(document).ready(function() {
  14.  
  15. 				$(window).scroll(function(e){
  16. 					var scrollTop = $(window).scrollTop();
  17. 					var docHeight = $(document).height();
  18. 					var winHeight = $(window).height();
  19. 					var scrollPercent = (scrollTop) / (docHeight - winHeight);
  20. 					var scrollPercentRounded = Math.round(scrollPercent*100)/100;
  21.  
  22. 				    $('#scrollPercentLabel>span').html(scrollPercentRounded);
  23. 				    repositionLabel();
  24. 				});
  25.  
  26. 				$(window).resize(function(){
  27. 					repositionLabel();
  28. 				});
  29.  
  30. 				function repositionLabel() {
  31. 					$('#scrollPercentLabel').css({
  32. 						position:'fixed',
  33. 						left: ($(window).width() - $('#scrollPercentLabel').outerWidth()) / 2,
  34. 						top: (($(window).height() - $('#scrollPercentLabel').outerHeight()) / 2) - $('#scrollPercentLabel').height()
  35. 					});
  36. 				}
  37.  
  38. 				repositionLabel();
  39.  
  40. 			});
  41.  
  42. 		</script>
  43.  
  44. 		<style>
  45.  
  46. 			body {
  47. 				background-image: url('http://subtlepatterns.com/patterns/crissXcross.png');
  48. 				margin: 0px;
  49. 				padding: 0px;
  50. 			}
  51.  
  52. 			#fakeHeight {
  53. 				height: 6000px;
  54. 				width: 1px;
  55. 			}
  56.  
  57. 			#scrollPercentLabel {
  58. 				font-family: Impact;
  59. 				font-size: 50px;
  60. 				color: #2B2B2B;
  61. 				background: rgba(255, 255, 255, 0.5);
  62. 				padding: 20px;
  63. 				position: absolute;
  64. 				top: 50%;
  65. 				left: 50%;
  66. 				box-shadow: 8px 8px 5px rgba(20, 20, 20, 1);
  67. 				border-radius: 15px;
  68. 			}
  69.  
  70. 		</style>
  71.  
  72. 	</head>
  73.  
  74. 	<body>
  75. 		<p id="fakeHeight"></p>
  76. 		<p id="scrollPercentLabel">scrollPercent: <span>0</span></p>
  77. 	</body>
  78.  
  79. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.