JS DOM Scrolling 🎯

Welcome to our deep dive into JavaScript (JS) DOM Scrolling! This tutorial is designed for both beginners and intermediates, so don't worry if some concepts are new to you. Let's get started!

Understanding the Document Object Model (DOM) 📝

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the structure of a document in a way that's easy for computers to understand. In JavaScript, we can manipulate the DOM to create, update, and style web pages dynamically.

The Role of JS in DOM Scrolling 💡

JavaScript plays a crucial role in controlling the scrolling behavior of a web page. By manipulating the scrolling properties, we can create smooth scrolling effects, manage the visible part of a web page, and improve user experience.

Getting Started with DOM Scrolling 📝

To control DOM scrolling, we'll be using the window object and the scroll and scrollBy methods.

The Window Object 📝

The window object represents the window or the browser viewport. It provides various properties and methods related to the browser window and the document.

The Scroll Method 📝

The scroll method sets the vertical scroll position of the page to the specified pixel value.

javascript

// Scroll to a specific pixel position
window.scroll(x, y);

The ScrollBy Method 📝

The scrollBy method scrolls the page by a specified number of pixels in both the horizontal and vertical directions.

javascript

// Scroll by specific pixels in both directions
window.scrollBy(x, y);

Practical Example: Smooth Scrolling 🎯

Let's create a simple example of smooth scrolling using JavaScript. We'll use the scroll method along with the setTimeout function to create a smooth scrolling effect.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS DOM Scrolling</title>
  <style>
    /* Style your page as per your preference */
  </style>
</head>
<body>

  <h1>Welcome to CodeYourCraft!</h1>
  <button id="scroll-btn">Scroll to bottom</button>

  <div style="height: 100vh;"></div>

  <script>
    // Get the scroll button
    const scrollBtn = document.getElementById('scroll-btn');

    // Add click event listener to the scroll button
    scrollBtn.addEventListener('click', () => {
      // Get the scrolling element (in this case, the body)
      const scrollingElement = document.documentElement;

      // Set the scrolling speed (in milliseconds)
      const scrollSpeed = 50;

      // Get the current scroll position
      const currentScrollPosition = scrollingElement.scrollTop;

      // Calculate the total scroll distance
      const totalScrollDistance = Math.floor(window.innerHeight);

      // If the current scroll position is not equal to the total scroll distance
      if (currentScrollPosition < totalScrollDistance) {
        // Scroll to the next position
        scrollingElement.scrollTop = currentScrollPosition + scrollSpeed;

        // Wait for the next frame (to create a smooth scrolling effect)
        setTimeout(() => {
          // Recursively call the scrolling function
          scroll();
        }, scrollSpeed);
      }
    });
  </script>

</body>
</html>