Issue with scroll animation across multiple div elements

Question

Issue with scroll animation across multiple div elements

I am working on a project where I have two main divs, one with the id of "left-div" and the other with the id of "right-div". In the "left-div", there are multiple nested divs each with their own unique id. The overflow-y property of the "left-div" is set to scroll. On the other hand, in the "right-div", there are several buttons each with their own id. My goal is to make it so that when a button is clicked, the "left-div" automatically scrolls to display the specific div related to the button. I am using jQuery for this task. How can I achieve this functionality?

Below is the code snippet:

<div id="#left-div">
   <div id="div1"></div>
   <div id="div2"></div>
   <div id="div3"></div>
   <div id="div4"></div>
</div>

<div id="#right-div">
   <button id="btn1"></button>
   <button id="btn2"></button>
   <button id="btn3"></button>
   <button id="btn4"></button>
</div>

javascript jquery html css

Answer 1

Answer №1

If you want to achieve a specific functionality, consider using the same class for both a div element and its corresponding button. When the button is triggered, you can target elements with that shared class and smoothly scroll to the first matching element.

$(document).ready(function() {
  $("button").click(function() {
    var currentElement = $(this);
    var commonClass = currentElement.attr("class");
    var matchedElements = document.getElementsByClassName(commonClass);
    $("html, body").animate(
      {
        scrollTop: $(matchedElements[0]).offset().top
      },
      2000
    );
  });
});

#div1 {
  background-color: red;
}
#div2 {
  background-color: yellow;
}

/* Additional CSS code */

#left-div {
  overflow-y: scroll;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Bootstrap 4 JS -->
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
      crossorigin="anonymous"
    ></script>
    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-8">
          <div id="left-div">
            <div id="div1" class="element1">
              <!-- Content of div1 goes here -->
            </div>
            <div id="div2" class="element2">
              <!-- Content of div2 goes here -->
            </div>
            <div id="div3" class="element3">
              <!-- Content of div3 goes here -->
            </div>
            <div id="div4" class="element4">
              <!-- Content of div4 goes here -->
            </div>
          </div>
        </div>

        <div class="col-4">
          <div id="right-div">
            <button id="btn1" class="element1">Button 1</button>
            <button id="btn2" class="element2">Button 2</button>
            <button id="btn3" class="element3">Button 3</button>
            <button id="btn4" class="element4">Button 4</button>
          </div>
        </div>
      </div>
    </div>

    <script src="./index.js"></script>
  </body>
</html>

Answer 2

If you want to achieve a specific functionality, consider using the same class for both a div element and its corresponding button. When the button is triggered, you can target elements with that shared class and smoothly scroll to the first matching element.

$(document).ready(function() {
  $("button").click(function() {
    var currentElement = $(this);
    var commonClass = currentElement.attr("class");
    var matchedElements = document.getElementsByClassName(commonClass);
    $("html, body").animate(
      {
        scrollTop: $(matchedElements[0]).offset().top
      },
      2000
    );
  });
});

#div1 {
  background-color: red;
}
#div2 {
  background-color: yellow;
}

/* Additional CSS code */

#left-div {
  overflow-y: scroll;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Bootstrap 4 JS -->
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
      crossorigin="anonymous"
    ></script>
    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-8">
          <div id="left-div">
            <div id="div1" class="element1">
              <!-- Content of div1 goes here -->
            </div>
            <div id="div2" class="element2">
              <!-- Content of div2 goes here -->
            </div>
            <div id="div3" class="element3">
              <!-- Content of div3 goes here -->
            </div>
            <div id="div4" class="element4">
              <!-- Content of div4 goes here -->
            </div>
          </div>
        </div>

        <div class="col-4">
          <div id="right-div">
            <button id="btn1" class="element1">Button 1</button>
            <button id="btn2" class="element2">Button 2</button>
            <button id="btn3" class="element3">Button 3</button>
            <button id="btn4" class="element4">Button 4</button>
          </div>
        </div>
      </div>
    </div>

    <script src="./index.js"></script>
  </body>
</html>

Issue with scroll animation across multiple div elements

Answer №1

Similar questions

Tips for aligning text in MUI Breadcrumbs

Removing an element in Vue.js

Purchase Now with Paypal Button

What is the best method for sending a document to a web API using Ajax, without relying on HTML user controls or forms?

Is it possible to submit a POST method without using a form?

Invalid Jquery syntax: Anticipated an assignment or function call but encountered an expression instead

Vertically Center Image in a Div

The div's height is not matching the CSS declaration as expected

Discover the steps to download web page data using Objective-C while ensuring that JavaScript has finished executing

Show a brief description alongside multiple post thumbnails

Extracting information from ul li div elements and saving it in JSON format

Extend the height of bootstrap 5.2.0 row/column to reach the bottom of the page

Use jquery and json to automatically populate select fields based on specific threshold values when they are changed

Is there a way to align this in a horizontal inline block?

Solution for Organizing Tables

Establishing a boundary by incorporating a variable into a numerical value

Finding the Nearest Value in an Array

Ways to filter and display multiple table data retrieved from an API based on checkbox selection in Angular 2 or JavaScript

A backend glitch is exposed by NextJS in the web application

Utilizing Fullcalendar 5 in conjunction with Angular: Embedding Components within Events