Back to: jQuery Tutorials
jQuery Scroll Event with Examples
In this article, we will discuss the jQuery Scroll Event with Examples. Please read our previous article, where we discussed jQuery Prevent Default.
jQuery scroll() method
The scroll event is raised when the user scrolls to a different place in the element. It applies to window objects, but also to scrollable frames and elements with the overflow CSS property set to scroll. The scroll() attaches a function to run when a scroll event occurs.
Syntax: $(selector).scroll(function)
Parameters:
- function: Optional. Specifies the function to run when the scroll event is triggered
Example:
In the below example, we are triggering the scroll event. When the scroll event will be triggered the <p> element will be displayed and at that moment it will be faded out.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.container {
overflow: scroll;
background-color: rgb(221, 221, 221);
line-height: 1.5;
padding: 20px;
width: 600px;
height: 300px;
border: 2px solid black;
border-radius: 20px;
font-size: 20px;
}
p {
margin: 20px;
font-weight: bold;
font-size: 30px;
text-align: center;
font-style: oblique;
display: none;
}
h1 {
font-size: 40px;
margin-bottom: 30px;
padding: 30px;
text-align: center;
text-transform: capitalize;
font-style: italic;
}
</style>
</head>
<body>
<h1>jQuey Scroll Event</h1>
<div class="container">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum ducimus
cumque eveniet enim cupiditate voluptates id doloremque iure ut ratione
aliquam, laborum maiores vel corporis tenetur vitae quia omnis quod veniam
eos! Optio ducimus voluptate quidem. Perspiciatis deleniti incidunt vero
explicabo excepturi voluptatibus consectetur fugiat fugit tempore
cupiditate temporibus alias quia, iusto suscipit et delectus libero porro
placeat ducimus eius odio. Explicabo eligendi possimus ipsum, consequuntur
inventore temporibus iure nemo blanditiis velit minima qui dolorem
necessitatibus voluptatem quasi, alias eveniet voluptas? Aliquid, odit
mollitia nemo qui nam ipsa corporis magni quaerat error neque incidunt
omnis libero sint porro, quis perspiciatis aut adipisci eligendi delectus
quam! Enim explicabo iusto voluptatem cupiditate laborum aliquam sapiente
quaerat maiores, repudiandae repellendus, reiciendis sed. Quia doloremque
dicta expedita numquam odio unde nostrum iure repellendus, ipsa modi
commodi exercitationem necessitatibus quis provident, consequuntur
veritatis tempore ducimus at reiciendis enim eos labore. Eligendi iure
nisi numquam enim qui facilis vero doloribus consequatur animi fuga nobis
explicabo nesciunt expedita culpa odio ipsa officia molestias voluptas
aspernatur, iste voluptatum consectetur dolores voluptates quo! Fugit odit
nobis repellat reprehenderit. Quod modi adipisci quia veniam aspernatur
cupiditate perferendis dicta laborum ab earum praesentium, cum tenetur
itaque et sint incidunt, officiis laudantium architecto. Sit error nobis
molestias quam animi incidunt tempora ad voluptatibus dolore odit sapiente
consectetur tempore deserunt sint vel amet, fugit delectus. Ipsum amet
officiis expedita, nostrum debitis sint adipisci porro eligendi
consectetur nihil illo, asperiores vel impedit molestiae labore fugit
exercitationem repellat animi quae. Quidem similique nostrum veritatis.
Totam, possimus blanditiis! Magnam id adipisci eius quas porro vitae
ratione aperiam iure deleniti natus. Ullam corrupti assumenda nihil saepe
accusantium facere debitis mollitia quam. Nulla, dolor modi quos maxime
hic, qui excepturi minus molestiae ullam, nisi vel tenetur perferendis
repellat ea quibusdam id quis error aliquam earum? Nostrum, sapiente
dolorum.
</div>
<p class="result">Scroll event triggered</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("div").scroll(function () {
$("p").css("display", "block").fadeOut(1000);
});
});
</script>
</body>
</html>
Now run the above code and scroll down and you will get the following output.
Example:
The following example keeps track of how many times the scroll event is raised. Here we have used a variable counter. Whenever you raised the scroll event this value of the counter is added by 1 and is displayed.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.container {
overflow: scroll;
background-color: rgb(221, 221, 221);
line-height: 1.5;
padding: 20px;
width: 600px;
height: 300px;
border: 2px solid black;
border-radius: 20px;
font-size: 20px;
}
p {
margin: 20px;
font-weight: bold;
font-size: 30px;
text-align: center;
font-style: oblique;
}
h1 {
font-size: 40px;
margin-bottom: 30px;
padding: 30px;
text-align: center;
text-transform: capitalize;
font-style: italic;
}
</style>
</head>
<body>
<h1>jQuey Scroll Event</h1>
<div class="container">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum ducimus
cumque eveniet enim cupiditate voluptates id doloremque iure ut ratione
aliquam, laborum maiores vel corporis tenetur vitae quia omnis quod veniam
eos! Optio ducimus voluptate quidem. Perspiciatis deleniti incidunt vero
explicabo excepturi voluptatibus consectetur fugiat fugit tempore
cupiditate temporibus alias quia, iusto suscipit et delectus libero porro
placeat ducimus eius odio. Explicabo eligendi possimus ipsum, consequuntur
inventore temporibus iure nemo blanditiis velit minima qui dolorem
necessitatibus voluptatem quasi, alias eveniet voluptas? Aliquid, odit
mollitia nemo qui nam ipsa corporis magni quaerat error neque incidunt
omnis libero sint porro, quis perspiciatis aut adipisci eligendi delectus
quam! Enim explicabo iusto voluptatem cupiditate laborum aliquam sapiente
quaerat maiores, repudiandae repellendus, reiciendis sed. Quia doloremque
dicta expedita numquam odio unde nostrum iure repellendus, ipsa modi
commodi exercitationem necessitatibus quis provident, consequuntur
veritatis tempore ducimus at reiciendis enim eos labore. Eligendi iure
nisi numquam enim qui facilis vero doloribus consequatur animi fuga nobis
explicabo nesciunt expedita culpa odio ipsa officia molestias voluptas
aspernatur, iste voluptatum consectetur dolores voluptates quo! Fugit odit
nobis repellat reprehenderit. Quod modi adipisci quia veniam aspernatur
cupiditate perferendis dicta laborum ab earum praesentium, cum tenetur
itaque et sint incidunt, officiis laudantium architecto. Sit error nobis
molestias quam animi incidunt tempora ad voluptatibus dolore odit sapiente
consectetur tempore deserunt sint vel amet, fugit delectus. Ipsum amet
officiis expedita, nostrum debitis sint adipisci porro eligendi
consectetur nihil illo, asperiores vel impedit molestiae labore fugit
exercitationem repellat animi quae. Quidem similique nostrum veritatis.
Totam, possimus blanditiis! Magnam id adipisci eius quas porro vitae
ratione aperiam iure deleniti natus. Ullam corrupti assumenda nihil saepe
accusantium facere debitis mollitia quam. Nulla, dolor modi quos maxime
hic, qui excepturi minus molestiae ullam, nisi vel tenetur perferendis
repellat ea quibusdam id quis error aliquam earum? Nostrum, sapiente
dolorum.
</div>
<p class="result"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
var counter = 0;
$("div").scroll(function () {
$("p").html(`The scroll event triggered ${(counter += 1)} times`);
});
});
</script>
</body>
</html>
Now run the above code and then scroll down and you will get the output something below. Here, the number of times will be varying.
jQuery scrollTop() & scrollLeft() method
The scrollTop() & scrollLeft() method sets or returns the vertical & horizontal scrollbar position respectively for the selected elements. When the scrollbar is on the top, the position is 0 and when the scrollbar is on the far left side, the position is 0.
Syntax:
When used to return the position:
- $(selector).scrollTop()
- $(selector).scrollLeft()
Set vertical and horizontal scrollbar position:
- $(selector).scrollTop(position)
- $(selector).scrollLeft(position)
Parameters:
- position: Specifies the vertical scrollbar position in pixels.
Example:
In the below example, we are returning the position of the div whenever scrolled.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.container {
overflow: scroll;
background-color: rgb(221, 221, 221);
line-height: 2;
padding: 20px;
width: 600px;
height: 300px;
border: 2px solid black;
border-radius: 20px;
font-size: 20px;
}
p {
margin: 20px;
font-weight: bold;
font-size: 30px;
text-align: center;
font-style: oblique;
}
h1 {
font-size: 40px;
margin-bottom: 30px;
padding: 30px;
text-align: center;
text-transform: capitalize;
font-style: italic;
}
</style>
</head>
<body>
<h1>jQuey Scroll Event</h1>
<div class="container">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum ducimus
cumque eveniet enim cupiditate voluptates id doloremque iure ut ratione
aliquam, laborum maiores vel corporis tenetur vitae quia omnis quod veniam
eos! Optio ducimus voluptate quidem. Perspiciatis deleniti incidunt vero
explicabo excepturi voluptatibus consectetur fugiat fugit tempore
cupiditate temporibus alias quia, iusto suscipit et delectus libero porro
placeat ducimus eius odio. Explicabo eligendi possimus ipsum, consequuntur
inventore temporibus iure nemo blanditiis velit minima qui dolorem
necessitatibus voluptatem quasi, alias eveniet voluptas? Aliquid, odit
mollitia nemo qui nam ipsa corporis magni quaerat error neque incidunt
omnis libero sint porro, quis perspiciatis aut adipisci eligendi delectus
quam! Enim explicabo iusto voluptatem cupiditate laborum aliquam sapiente
quaerat maiores, repudiandae repellendus, reiciendis sed. Quia doloremque
dicta expedita numquam odio unde nostrum iure repellendus, ipsa modi
commodi exercitationem necessitatibus quis provident, consequuntur
veritatis tempore ducimus at reiciendis enim eos labore. Eligendi iure
nisi numquam enim qui facilis vero doloribus consequatur animi fuga nobis
explicabo nesciunt expedita culpa odio ipsa officia molestias voluptas
aspernatur, iste voluptatum consectetur dolores voluptates quo! Fugit odit
nobis repellat reprehenderit. Quod modi adipisci quia veniam aspernatur
cupiditate perferendis dicta laborum ab earum praesentium, cum tenetur
itaque et sint incidunt, officiis laudantium architecto. Sit error nobis
molestias quam animi incidunt tempora ad voluptatibus dolore odit sapiente
consectetur tempore deserunt sint vel amet, fugit delectus. Ipsum amet
officiis expedita, nostrum debitis sint adipisci porro eligendi
consectetur nihil illo, asperiores vel impedit molestiae labore fugit
exercitationem repellat animi quae. Quidem similique nostrum veritatis.
Totam, possimus blanditiis! Magnam id adipisci eius quas porro vitae
ratione aperiam iure deleniti natus. Ullam corrupti assumenda nihil saepe
accusantium facere debitis mollitia quam. Nulla, dolor modi quos maxime
hic, qui excepturi minus molestiae ullam, nisi vel tenetur perferendis
repellat ea quibusdam id quis error aliquam earum? Nostrum, sapiente
dolorum.
</div>
<p class="result"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("div").scroll(function () {
let topPosition = $("div").scrollTop();
$("p").html(`Top : ${topPosition}`);
});
});
</script>
</body>
</html>
Now run the above code and scroll down and you will get the following output.
Example:
The following example keeps track of whether the user scrolled up or down.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.container {
overflow: scroll;
background-color: rgb(221, 221, 221);
line-height: 2;
padding: 20px;
width: 600px;
height: 300px;
border: 2px solid black;
border-radius: 20px;
font-size: 20px;
}
p {
margin: 20px;
font-weight: bold;
font-size: 30px;
text-align: center;
font-style: oblique;
}
h1 {
font-size: 40px;
margin-bottom: 30px;
padding: 30px;
text-align: center;
text-transform: capitalize;
font-style: italic;
}
</style>
</head>
<body>
<h1>jQuey Scroll Event</h1>
<div class="container">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum ducimus
cumque eveniet enim cupiditate voluptates id doloremque iure ut ratione
aliquam, laborum maiores vel corporis tenetur vitae quia omnis quod veniam
eos! Optio ducimus voluptate quidem. Perspiciatis deleniti incidunt vero
explicabo excepturi voluptatibus consectetur fugiat fugit tempore
cupiditate temporibus alias quia, iusto suscipit et delectus libero porro
placeat ducimus eius odio. Explicabo eligendi possimus ipsum, consequuntur
inventore temporibus iure nemo blanditiis velit minima qui dolorem
necessitatibus voluptatem quasi, alias eveniet voluptas? Aliquid, odit
mollitia nemo qui nam ipsa corporis magni quaerat error neque incidunt
omnis libero sint porro, quis perspiciatis aut adipisci eligendi delectus
quam! Enim explicabo iusto voluptatem cupiditate laborum aliquam sapiente
quaerat maiores, repudiandae repellendus, reiciendis sed. Quia doloremque
dicta expedita numquam odio unde nostrum iure repellendus, ipsa modi
commodi exercitationem necessitatibus quis provident, consequuntur
veritatis tempore ducimus at reiciendis enim eos labore. Eligendi iure
nisi numquam enim qui facilis vero doloribus consequatur animi fuga nobis
explicabo nesciunt expedita culpa odio ipsa officia molestias voluptas
aspernatur, iste voluptatum consectetur dolores voluptates quo! Fugit odit
nobis repellat reprehenderit. Quod modi adipisci quia veniam aspernatur
cupiditate perferendis dicta laborum ab earum praesentium, cum tenetur
itaque et sint incidunt, officiis laudantium architecto. Sit error nobis
molestias quam animi incidunt tempora ad voluptatibus dolore odit sapiente
consectetur tempore deserunt sint vel amet, fugit delectus. Ipsum amet
officiis expedita, nostrum debitis sint adipisci porro eligendi
consectetur nihil illo, asperiores vel impedit molestiae labore fugit
exercitationem repellat animi quae. Quidem similique nostrum veritatis.
Totam, possimus blanditiis! Magnam id adipisci eius quas porro vitae
ratione aperiam iure deleniti natus. Ullam corrupti assumenda nihil saepe
accusantium facere debitis mollitia quam. Nulla, dolor modi quos maxime
hic, qui excepturi minus molestiae ullam, nisi vel tenetur perferendis
repellat ea quibusdam id quis error aliquam earum? Nostrum, sapiente
dolorum.
</div>
<p class="result"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(document).ready(function () {
var lastScrollTop = 0;
$("div").scroll(function () {
var currentScrollPosition = $(this).scrollTop();
if (currentScrollPosition > lastScrollTop) {
$("p").text("You scrolled down");
} else {
$("p").text("You scrolled up");
}
lastScrollTop = currentScrollPosition;
});
});
});
</script>
</body>
</html>
Now run the above code and scroll down and you will get the following output.
Now scroll up and you will get the following output.
Example:
In the below example, notice that no matter where ever you are in the <div> by scrolling, if you click on the button “Go to top” you will reach the top.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
button {
background-color: #1c4450;
border: none;
color: white;
padding: 20px 35px;
margin: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
border-radius: 50px;
cursor: pointer;
}
.container {
overflow: scroll;
background-color: rgb(221, 221, 221);
line-height: 2;
padding: 20px;
width: 600px;
height: 300px;
border: 2px solid black;
border-radius: 20px;
font-size: 20px;
scroll-behavior: smooth;
}
p {
margin: 20px;
font-weight: bold;
font-size: 30px;
text-align: center;
font-style: oblique;
}
h1 {
font-size: 40px;
margin-bottom: 30px;
padding: 30px;
text-align: center;
text-transform: capitalize;
font-style: italic;
}
</style>
</head>
<body>
<h1>jQuey Scroll Event</h1>
<div class="container">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum ducimus
cumque eveniet enim cupiditate voluptates id doloremque iure ut ratione
aliquam, laborum maiores vel corporis tenetur vitae quia omnis quod veniam
eos! Optio ducimus voluptate quidem. Perspiciatis deleniti incidunt vero
explicabo excepturi voluptatibus consectetur fugiat fugit tempore
cupiditate temporibus alias quia, iusto suscipit et delectus libero porro
placeat ducimus eius odio. Explicabo eligendi possimus ipsum, consequuntur
inventore temporibus iure nemo blanditiis velit minima qui dolorem
necessitatibus voluptatem quasi, alias eveniet voluptas? Aliquid, odit
mollitia nemo qui nam ipsa corporis magni quaerat error neque incidunt
omnis libero sint porro, quis perspiciatis aut adipisci eligendi delectus
quam! Enim explicabo iusto voluptatem cupiditate laborum aliquam sapiente
quaerat maiores, repudiandae repellendus, reiciendis sed. Quia doloremque
dicta expedita numquam odio unde nostrum iure repellendus, ipsa modi
commodi exercitationem necessitatibus quis provident, consequuntur
veritatis tempore ducimus at reiciendis enim eos labore. Eligendi iure
nisi numquam enim qui facilis vero doloribus consequatur animi fuga nobis
explicabo nesciunt expedita culpa odio ipsa officia molestias voluptas
aspernatur, iste voluptatum consectetur dolores voluptates quo! Fugit odit
nobis repellat reprehenderit. Quod modi adipisci quia veniam aspernatur
cupiditate perferendis dicta laborum ab earum praesentium, cum tenetur
itaque et sint incidunt, officiis laudantium architecto. Sit error nobis
molestias quam animi incidunt tempora ad voluptatibus dolore odit sapiente
consectetur tempore deserunt sint vel amet, fugit delectus. Ipsum amet
officiis expedita, nostrum debitis sint adipisci porro eligendi
consectetur nihil illo, asperiores vel impedit molestiae labore fugit
exercitationem repellat animi quae. Quidem similique nostrum veritatis.
Totam, possimus blanditiis! Magnam id adipisci eius quas porro vitae
ratione aperiam iure deleniti natus. Ullam corrupti assumenda nihil saepe
accusantium facere debitis mollitia quam. Nulla, dolor modi quos maxime
hic, qui excepturi minus molestiae ullam, nisi vel tenetur perferendis
repellat ea quibusdam id quis error aliquam earum? Nostrum, sapiente
dolorum.
</div>
<button>Go to top</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("div").scrollTop(0);
});
});
</script>
</body>
</html>
Now run the above code and scroll down and then click on the Go to Top button and you will move to the top position as shown in the below image.
In the next article, I am going to discuss how to check if an event is already bound using jQuery with Examples. Here, in this article, I try to explain jQuery Scroll Event with Examples and I hope you enjoy this jQuery Scroll Event article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.