Javascript Scroll

In JavaScript, we can interact with the scrolling behaviour of a webpage using the scroll event or by directly manipulating the scroll position.

Here are some common ways to work with scrolling in JavaScript:

Listening for Scroll Events:

We can use the `addEventListener` method to listen for the `scroll` event on the window object.

This allows you to execute a function whenever the user scrolls.

Example:

window.addEventListener('scroll', function() {

  // Your code to handle scroll events
  console.log('Page scrolled!');

});

Getting Scroll Position:

You can retrieve the current scroll position using the `window.scrollY` property.

Example:

// Get the current scroll position
let scrollPosition = window.scrollY;

console.log('Current scroll position:', scrollPosition);

This property represents the number of pixels that the document is currently scrolled vertically.

Example:

// Smooth scroll to the top of the page
window.scrollTo({
  top: 0,
  behavior: 'smooth'
});

Smooth Scroll to a Specific Position:

Example:

// Scroll to an element with the ID 'targetElement'

document.getElementById('targetElement').scrollIntoView({
  behavior: 'smooth'
});

We can smoothly scroll to a specific position using the `scrollTo` method with the behaviour: 'smooth' option.

Scroll to an Element:

We can scroll to a specific element on the page using the `scrollIntoView` method.

Example: Displaying a "Scroll to Top" Button:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    #scrollToTopBtn {
      display: none;
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: #007bff;
      color: #fff;
      border: none;
      padding: 10px 20px;
      cursor: pointer;
    }
  </style>
  <title>Scroll Example</title>
</head>

<body>
  <!-- Content goes here -->

  <button id="scrollToTopBtn" onclick="scrollToTop()">Scroll to Top</button>

  <script>

    // Show/hide the "Scroll to Top" button based on scroll position
    window.addEventListener('scroll', function() {
      let scrollToTopBtn = document.getElementById('scrollToTopBtn');

      if (window.scrollY > 200) {
        scrollToTopBtn.style.display = 'block';
      } else {
        scrollToTopBtn.style.display = 'none';
      }
    });

    // Function to scroll to the top of the page
    function scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    }

  </script>
</body>
</html>

Note: a button with the ID `scrollToTopBtn` is displayed when the user has scrolled down more than 200 pixels. Clicking the button triggers the `scrollToTop` function, which smoothly scrolls the page to the top.

<-- Scope

Timer -->