How to Accurately Get and Display Scroll Position with jQuery – Using scroll() and scrollTop()

Getting the scroll position with jQuery is a crucial aspect for enhancing the interactivity of various web applications and websites. In this article, we will explain how to get and display the scroll position information, and the key points to keep in mind during this process.

Basics of Getting and Displaying Scroll Position Information

jQuery’s scroll() and scrollTop() are methods used to detect browser scroll actions and obtain the scroll position. Follow the steps below to get and display the scroll position information:

• Load the jquery.min.js (v1.4.4) file.
• Use the scroll() method to detect scrolling actions.
• Get the scroll position from the top of the page using the scrollTop() method.

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
	$(window).scroll(function () { 
			$("#idAtai").val($(document).scrollTop());	// Set the scroll position value to idAtai
	});
</script>

Setting the Display Area for Scroll Position Information with CSS

Design the area to display scroll position information using CSS. By using position:fixed, you can always display the information area at the top of the screen. Fix the display area (#idKotei) for the scroll position using position:fixed.

<style type="text/css">  
<!--
h1{
	font-size:14px;
	font-weight:normal;
	text-align:center;
}
#idWrap{
	width:700px;
	margin:0 auto;
}
#idKotei{
	width:700px;
	margin:0 auto;
	position:fixed;
	height:40px;
	text-align:center;
}
* html div#idKotei {
    position: absolute;
    top: expression(eval(document.documentElement.scrollTop+0));
	margin:0 auto;
	width:700px;
}
-->  
</style>

Assembling the Actual HTML Code

Next, use HTML to set up the area for displaying scroll position information and the area where users can experience actual scrolling.

<div id="idWrap">
<div id="idKotei">
	<h1>Get and Display Scroll Position Information (Scroll Down to See)</h1>
    <input id="idAtai" style="text-align:center; font-size:14px;" value="0" type="text" />
</div><!--/ Fixed value display input area -->
</div>
<div style="height:10000px;">
</div><!--/ Set height to 10000px -->

Impressions After Implementing Get and Display

After implementing the scroll position information display, keep the following points in mind:

• Depending on the browser type and version, there may be slight discrepancies in the obtained values due to CSS specifications.
• When moving within the page using anchor links, it is recommended to use transparent images to create spacing rather than CSS specifications for margins and padding.

Demo Page for Getting and Displaying Scroll Position Information

For those who want to see the actual implementation, please check the demo page below.
Demo for Getting and Displaying Scroll Position Information

Conclusion

Through this article, we learned the basics of getting and displaying scroll position information using jQuery. By utilizing this technique, you can create interactive web pages that enhance user experience.
※Please use at your own risk if you are going to reuse this content.
Do not reuse the Google Analytics tags within the demo page tags.