Updated April 20, 2023
Definition of jQuery offset bottom
The jQuery offset bottom is used to gets the offset of the bottom coordinate for selected elements relative to the documents. The jQuery offset() function is a built-in function in jQuery, by which we can return the offset of the bottom coordinate. The jQuery offset() function only specifies the top and left properties position, but with the help of top property and outerHeight() function, we can get the bottom position for elements.
Syntax:
The syntax to return the offset bottom coordinate –
var offBottom = (selector).offsetTop + $(selector).outerHeight();where –
- offsetTop – offsetTop property returns the offset top of the first matched selector.
- outerHeight() – outerHeight() function returns the outer height of the offset top of the first matched selector.
- offBottom – offBottom is a variable to store the calculated offset bottom.
Working of the jQuery offset bottom
The JQuery offset bottom returns the offset bottom of the first matched selector or element. Suppose in our page we have div element, we want the offset bottom of the first div element, so we can use the offset bottom as “var bottom = “div”.offsetTop + $( div ).outerHeight();”. The offsetTop property gives the top offset which adds with return value of the outerHeight() function (which count the content + padding + border).
Examples
Example to get the “div” element bottom offset by using offsetTop and outerHeight() function –
Example #1
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery offset bottom </title>
<script>
function disp()
{
function offset1(el) {
// Calculate the bottom vaue
var bottom = el.offsetTop + $(el).outerHeight();
// return bottom offset
return bottom;
}
// example use for div
var div = document.querySelector('div');
var divOffset = offset1(div);
alert(divOffset);
}
</script>
</head>
<body>
<h3> The Example for offset bottom : </h3>
<div>
<h2> The List of Vegetables and Fruits are : </h2>
<ul>
<li class = "veg" > Mushroom </li>
<li class = "fru" > Banana </li>
<li class = "veg" > Broccoli </li>
<li class = "fru" > Apple </li>
<li class = "veg" > Corn </li>
<li class = "fru" > Cherry </li>
<li class = "veg" > Cucumber </li>
<li class = "fru" > Pome </li>
<li class = "veg"> Bean </li>
</ul>
</div>
<button onclick = "disp()"> Get bottom offset of "div" element </button>
</body>
</html>An output of the above code is –
Once we click on the “Get bottom offset of “div” element” button, the output is –
In the above code, the “div” element is created for which the offset bottom is calculating once the button is clicked. The offset bottom is calculating by using this statement “var bottom = el.offsetTop + $(el).outerHeight();” and calculated value is displaying by the alert, as we can see in the output.
Example to get multiple elements bottom offset based on class by using offsetTop and outerHeight() function –
Example #2
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery offset bottom </title>
<style>
#test {
top: 20px;
margin: 10px;
padding: 10px;
width: 300px;
position: relative;
border: 5px solid black
}
</style>
<script>
function offset1(el) {
// Calculate the bottom vaue
var bottom = el.offsetTop + $(el).outerHeight();
// return bottom offset
return bottom;
}
function poffset()
{
// example use for p
var p = document.querySelector('p');
var divOffset = offset1(p);
$("span").text("The bottom offset of p element is : "+divOffset);
}
function h2offset()
{
// example use for h2
var h = document.querySelector('h2');
var hOffset = offset1(h);
$("div").text("The bottom offset of h2 element is : "+hOffset);
}
</script>
</head>
<body>
<h3> The Example for offset bottom : </h3>
<p id="test" > This a first paragraph to get its bottom offset. </p>
<button onclick = "poffset()"> Get bottom offset of "p" element </button>
<br>
<span> </span>
<h2 > This a second heading to get its bottom offset. </h2>
<button onclick = "h2offset()"> Get bottom offset of "h2" element </button>
<div> </div>
</body>
</html>An output of the above code is –
Once we click on the first button, the output is –
Once we click on the second button, the output is –
In the above code, the “p” and “h3” elements offset bottom is calculating once the respective button is clicked. The offset bottom is calculating by using this statement “var bottom = el.offsetTop + $(el).outerHeight();” and calculated value is displaying.
Example of jQuery offset bottom to get the “button” element bottom offset by using position() and outerHeight() function –
Example #3
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery offset bottom </title>
<style>
#test {
top: 20px;
margin: 10px;
border: 5px solid black
width: 300px;
background-color: yellow;
}
</style>
<script>
function offset1(el) {
// Calculate the bottom vaue
var p = $( el ).first();
var pos = p.position();
var scrollTop = pos.top;
var bottom = scrollTop + $(el).outerHeight() ;
// return bottom offset
return bottom;
}
function boffset()
{
// example use for p
var b = document.querySelector('button');
var bOffset = offset1( b );
$("span").text("The bottom offset of p element is : " +bOffset);
}
</script>
</head>
<body>
<h3> The Example for offset bottom : </h3>
<button onclick = "boffset()" id = "test" > Get bottom offset of button element </button>
<br>
<span> </span>
</body>
</html>An output of the above code is –
Once we click on the “Get bottom offset of button element” button, the output is –
In the above code, the “button” element offset bottom is calculating once the button is clicked. The offset bottom is calculating by using the position function, which returns the position of an element relative to another.
Conclusion
The jQuery offset bottom is used to gets the offset of the bottom coordinate for selected elements relative to the documents.
Recommended Articles
This is a guide to jQuery offset bottom. Here we discuss the description, working of the jQuery offset bottom examples with code implementation respectively. You may also have a look at the following articles to learn more –
