Updated March 13, 2023
Definition of jQuery offset scroll
jQuery offset scroll method allows us to retrieve an element’s current location in the document. On the other hand, position returns the current position relative to the offset parent; offset () is more beneficial for putting a new element on top of an existing one for global manipulation. Offset() returns an object with the top and left properties. In some circumstances, the number returned by dimension-related APIs, such as offset(), may be fractional. The code should not assume that the value is an integer. Furthermore, when a user zooms in on a website.
What is a jQuery offset scroll?
- jQuery offset scroll dimensions may be inaccurate; browsers do not expose an API to identify this circumstance.
- This procedure returns the offset coordinates of the first matching element. It returns a pixel-based object with two properties, i.e., top and left.
- The offset coordinates of ALL matching elements are set using this approach. Below is the syntax of the jQuery offset scroll method as follows.
Syntax to return the coordinates of offset –
$(selector).Offset()Syntax to set the offset coordinates –
$(selector).Offset({top:val, left:val})Syntax to set offset coordinates using function –
$(selector).Offset(function(index, current_offset))Below is the parameter description syntax of the jQuery offset scroll method.
1) Top value {top: val} – This value is required when setting the offset. It will specify the top coordinate in pixels. Example of top value is {top: 100}.
2) Left value {left: val} – This value is required when setting the offset. It will specify the left coordinate in pixels. Example of top value is {left: 100}.
3) Function – This is an optional jQuery offset scroll syntax parameter. It will specify the option which contains the left and top coordinates.
4) Index – The index is the parameter used in function coordinates. It will return the position of the element from the set.
5) Current offset – Index is the parameter used in function coordinates. It will return the current coordinates from the selected element.
How to use jQuery offset scroll?
- When we click on a button or a heading list on our website, we often want it to scroll to a specific portion of the page automatically.
- As a result, we’ll need to use jQuery to do this automatic scrolling to the appropriate element. We can do this in a very simple way with jQuery.
- The scrollTop() method sets the scroll bar’s vertical position to the value ‘val.’
- It is used to acquire the coordinates of the first element in a set of all matched elements using the offset() method. We can use jQuery animation() to implement smooth scrolling once we’ve included jQuery on the page.
- The scrollTop() method in jQuery sets the scrolltop position. The scrollTop() method returns the first matching element’s top scroll offset. This approach can be applied to both visible and hidden items.
- Interestingly, this method lets us specify an offset so that the scroll stops a certain distance before the goal.
- We may get the vertical and horizontal offset scrolled using element scrollTop and element scrollLeft, respectively.
- We can use the document body if we are concerned about the entire page. If we need percentages, we can compare them to element offsetHeight and element offsetWidth.
jQuery offset scroll function
- This method uses a function to set the offset. This method takes an optional parameter. The coordinate of matched elements is returned by this method.
- The scrollTop property gets or sets the vertical scrolling of an element’s content in pixels.
- The scrollTop value of an element is a measurement of the distance between the element’s top and the uppermost visible content.
- When the content of an element does not provide a vertical scrollbar, the scrollTop value is 0.
- The window’s scroll is returned when scrollTop is used on the root element. This is an exception to the scrollTop rule. Negative numbers do not cause scrollTop to respond; instead, it resets itself to 0.
Example
Different examples are mentioned below:
The below example shows how to scroll the specific element by using jQuery.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=2.0">
<script src=
Integrity = "sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
Crossorigin ="anonymous">
</script>
<title> JQuery offset scroll
</title>
<style>
div {
color: #0f9d58;
border: 2px solid #0f9d58;
width: 400px;
height: 300px;
overflow: auto;
} p {
width: 400px;
height: 300px; }
</style>
</head>
<body>
<div class="demo">
<h1>JQuery</h1>
<p>offset scroll</p>
</div>
<script>
var container = $('div');
var scrollTo = $('p');
var position = scrollTo.offset().top
- container.offset().top
+ container.scrollTop ();
</script>
</body>
</html>
The below example shows how to scroll to the different sections of the page by using jQuery offset scroll.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<script src=
"https://code.jQuery.com/jQuery-3.5.1.min.js"
integrity=
"sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous">
</script>
<title>
JQuery offset scroll
</title>
<style>
div {
color: #0f9d58;
border: 3px solid #0f9d58;
margin: 10px;
width: 400px;
height: 300px;
overflow: auto;
}
p {
width: 400px;
height: 300px;
}
button {
margin: 15px;
}
</style>
</head>
<body>
<div class="demo">
<h1>JQuery offset scroll</h1>
<p id="p1">JQuery 1</p>
<p id="p2">JQuery 2</p>
</div>
<button onclick="jQuery1()">
paragraph 1
</button>
<button onclick="JQuery2()">
paragraph 2
</button>
<script>
var container = $('div');
function jQuery1() {
var scrollTo = $("#p1");
var position = scrollTo.offset().top
- container.offset().top
+ container.scrollTop();
container.animate({
scrollTop: position
});
}
function JQuery2() {
var scrollTo = $("#p2");
var position = scrollTo.offset().top
- container.offset().top
+ container.scrollTop();
container.animate ({
scrollTop: position
});
}
</script>
</body>
</html>
Conclusion
This procedure returns the offset coordinates of the FIRST matching element. It returns a pixel-based object with two properties, i.e., top and left. The scrollTop() method in jQuery sets the scrolltop position. The scrollTop () method returns the first matching element’s top scroll offset.
Recommended Articles
This is a guide to jQuery offset scroll. Here we discuss the definition, What is jQuery offset scroll? How to use jQuery offset scroll? Examples, code. You may also have a look at the following articles to learn more –
