Updated April 15, 2023
Definition of jQuery scroll
JQuery provides different types of functionality to the user, in which that jQuery scroll is one the method() or we can say that functionality that is provided by the jQuery. With the help of jQuery, we can scroll the specified element that we want, and then the scroll() method is an inbuilt method of jQuery. This is suitable for all browser windows as well as all scrollable elements. We can use this method for different purposes such as if we need to scroll the event and execute the attached function after the scrolling. In another word, we can say that it is used to trigger events.
What is a jQuery scroll?
The scroll() method is shipped off a component when the client looks to a better place in the component. We can apply on windows objects as well as scrollable edges width is not exactly the stature or width of its substance. The scroll() method happens when the client looks in the predefined component. The scroll() method works for every scrollable component and the window object (program window). The scroll() method triggers the scroll() method, or joins a capacity to run when a scroll() method happens.
jQuery scroll() Method
Now let’s see the scroll() method with syntax as follows.
We can either essentially utilize the scroll() method or can add a capacity to the scroll() method. The grammar of utilizing the scroll() method is given as follows –
Trigger the occasion for the chosen components.
Syntax
$(selector).scroll()Explanation
In the above syntax, we use a single parameter that uses the scroll() method and this is the simple method.
Now let’s see the syntax for function with scroll() method as follows.
Syntax
$(selector).scroll (specified function)Explanation
In the above syntax, we use one more parameter that is the specified function that is attached to the function. The selector in the above punctuation is the chosen component. The boundary work referenced in the above punctuation is discretionary. It is a capacity to execute when the scroll() method happens. The connected capacity plays out a particular errand on looking over.
How to Use jQuery To Scroll?
This technique works for every scrollable component and the program window. Boundary: This technique acknowledges single boundaries work which is discretionary. It is utilized to indicate the capacity to run when the scroll event is set off. Bring Value back: It ties an occasion when the scroll is occurring for the predetermined component.
Now let’s see the example of the scroll method for better understanding as follows.
Example #1
<!DOCTYPE html>
<html>
<head>
<title>Welcome In JQuery Scroll Method</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jQuery/3.3.1/jQuery.min.js">
</script>
<script>
$(document).ready(function() {
$("div").scroll(function() {
alert("scrolling Done");
});
});
</script>
<style>
div {
border: 2px solid rgb(146, 4, 4);
width: 600px;
height: 120px;
overflow: scroll;
}
</style>
</head>
<body>
<div>Welcome In JQuery Scroll Method!
Welcome In JQuery Scroll Method!
Welcome In JQuery Scroll Method!
Welcome In JQuery Scroll Method!
Welcome In JQuery Scroll Method!
Welcome In JQuery Scroll Method!
Welcome In JQuery Scroll Method!
Welcome In JQuery Scroll Method!
Welcome In JQuery Scroll Method!
Welcome In JQuery Scroll Method!
Welcome In JQuery Scroll Method!
Welcome In JQuery Scroll Method!
Welcome In JQuery Scroll Method!
</div>
</body>
</html>Explanation
In the above example, we try to implement the scroll() method, in this example, we write the simple HTML code with jQuery script as shown. After that, we write the div tag with some text to scroll the page. Here we write a scroll() method to scroll the page from top to bottom. The final output of the above program we illustrated by using the following screenshot as follows.
In the above screenshot, we show the scroll bar after scrolling the above page it shows the following message as shown in the following screenshot as follows.
jQuery Scroll To Top
Now let’s see the scroll to top method with an example as follows.
The scrollTo method() is used to scroll vertically to the top of the page this conduct can be utilized to look to the highest point of the page by applying this strategy on the window property.
Example #2
<!DOCTYPE html>
<html>
<head>
<title>
Welcome in JQuery scrollto Windows () method. using JQuery!
</title>
<style>
.scroll {
height: 800px;
background-color: rgb(180, 92, 10);
}
</style>
</head>
<body>
<h1 style="color: rgb(109, 114, 109)">
Welcome in JQuery Home Page
</h1>
<b>
Hi this landing page of jQuery!
</b>
<p>
Now click on below button to scroll the window top.
</p>
<p class="scroll">
This is scrolling windows of jQuery
</p>
<button onclick="scrollToTop()">
Click here to scroll top
</button>
<script src=
"https://code.jQuery.com/jQuery-3.3.1.min.js">
</script>
<script>
function scrollToTop() {
$(window).scrollTop(0);
}
</script>
</body>
</html>Explanation
In the above example, we try to implement the scrollTo method. The final output of the above program we illustrated by using the following screenshot as follows.
In the above example, we can do some HTML content and at the end of this page, we have a button to scroll the window at the top as shown in the following screenshot as follows.
After clicking on the above button window scroll to the top of an HTML page.
jQuery Scroll to Element Code
Example #3
Now let’s see the scroll to element code with an example as follows.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta token="viewpoint" html_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>
Scroll to specific element!
</title>
<style>
div {
color: #48574f;
border: 2px solid #05110b;
width: 300px;
height: 150px;
overflow: auto;
}
p {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="demo1">
<h1>SampleDemo</h1>
<p>SampleDemo2</p>
</div>
<script>
var container = $('div');
var scrollTo = $('p');
var position = scrollTo.offset().top
- container.offset().top
+ container.scrollTop();
container.scrollTop(position);
</script>
</body>
</html>Explanation
The final output of the above program we illustrated by using the following screenshot as follows.
Conclusion
We hope from this article you learn more about the jQuery scroll. From the above article, we have taken in the essential idea of the jQuery scroll and we also see the representation and example of the jQuery scroll. From this article, we learned how and when we use the jQuery scroll.
Recommended Articles
This is a guide to jQuery scroll. Here we discuss the definition, What is a jQuery scroll, How to Use jQuery To Scroll, examples with code implementation. You may also have a look at the following articles to learn more –
