Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML Window screenTop Property
The HTML Window screenTop property returns the vertical distance in pixels between the top edge of the browser window and the top edge of the user's screen. This property is useful for determining the window's position when creating popup windows or managing window layouts.
Note − The screenTop property is not supported in Firefox browsers. Firefox uses the screenY property instead for the same functionality.
Syntax
Following is the syntax for the screenTop property −
window.screenTop
Return Value
The screenTop property returns a number representing the vertical distance in pixels from the top of the screen to the top of the browser window. If the window is positioned at the very top of the screen, it returns 0.
Browser Compatibility
| Browser | Support | Alternative |
|---|---|---|
| Chrome | Yes | N/A |
| Firefox | No | Use window.screenY
|
| Safari | Yes | N/A |
| Edge | Yes | N/A |
| Internet Explorer | Yes | N/A |
Example
Following example demonstrates the HTML Window screenTop property −
<!DOCTYPE html>
<html>
<head>
<title>HTML Window screenTop Property</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
}
.btn {
background: #db133a;
border: none;
padding: 10px 20px;
border-radius: 4px;
color: white;
cursor: pointer;
font-size: 16px;
margin: 10px;
}
.result {
font-size: 18px;
margin: 20px;
padding: 15px;
background: rgba(255, 255, 255, 0.8);
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Window screenTop Property Demo</h1>
<button onclick="showScreenTop()" class="btn">Show screenTop Value</button>
<div id="result" class="result"></div>
<script>
function showScreenTop() {
var topPosition = window.screenTop;
document.getElementById('result').innerHTML =
'Vertical position from screen top: ' + topPosition + ' pixels';
}
</script>
</body>
</html>
The output displays the current vertical position of the window relative to the screen −
Window screenTop Property Demo [Show screenTop Value] Vertical position from screen top: 85 pixels
Cross-Browser Solution
To ensure compatibility across all browsers, including Firefox, use this approach −
<!DOCTYPE html>
<html>
<head>
<title>Cross-Browser Window Position</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Cross-Browser Window Position Detection</h2>
<button onclick="getWindowPosition()" style="padding: 10px 15px;">Get Window Position</button>
<div id="position-info" style="margin-top: 15px; font-size: 16px;"></div>
<script>
function getWindowPosition() {
// Use screenTop for most browsers, screenY for Firefox
var topPos = (typeof window.screenTop !== 'undefined') ?
window.screenTop : window.screenY;
var leftPos = (typeof window.screenLeft !== 'undefined') ?
window.screenLeft : window.screenX;
document.getElementById('position-info').innerHTML =
'<strong>Window Position:</strong><br>' +
'Top: ' + topPos + ' pixels<br>' +
'Left: ' + leftPos + ' pixels<br>' +
'Browser: ' + navigator.userAgent.split(' ')[0];
}
</script>
</body>
</html>
This solution checks for both screenTop and screenY properties to ensure cross-browser compatibility −
Cross-Browser Window Position Detection [Get Window Position] Window Position: Top: 85 pixels Left: 150 pixels Browser: Mozilla/5.0
Common Use Cases
The screenTop property is commonly used in the following scenarios −
-
Popup positioning − Centering popup windows on the screen relative to the parent window.
-
Multi-window applications − Managing the layout of multiple browser windows.
-
Screen resolution detection − Determining available screen space for optimal window placement.
-
Window state tracking − Saving and restoring window positions in web applications.
Conclusion
The window.screenTop property provides the vertical distance between the browser window and the screen edge. While not supported in Firefox (use screenY instead), it is valuable for window positioning and layout management in web applications. Always implement cross-browser solutions when using this property.
306 Views
