jQuery Scroll Event

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:

  1. 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.

jQuery Scroll Event

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 Scroll Event with Examples

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:

  1. $(selector).scrollTop()
  2. $(selector).scrollLeft()

Set vertical and horizontal scrollbar position:

  1. $(selector).scrollTop(position)
  2. $(selector).scrollLeft(position)
Parameters:
  1. 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.

jQuery scrollTop() & scrollLeft() method

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.

Scroll Event Examples in jQuery

Now scroll up and you will get the following output.

Scroll Event in jQuery

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.

jQuery scroll() method

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.

Leave a Reply

Your email address will not be published.