Проблема в анимации scrollTop для нескольких div - PullRequest
Новая
       1

Проблема в анимации scrollTop для нескольких div

2 голосов
/ 21 марта 2020

У меня есть два div с id (# left-div - # right-div). В # left-div у меня есть multi div с id, а переполнение # left-div - это прокрутка. В # right-div у меня есть мульти кнопка с идентификатором. Я хочу, чтобы после нажатия на каждую кнопку прокрутка # left-div показывала Specifi c div, которую нажимала эта кнопка. Я использую jquery. Как создать это действие?

Это мой код: 

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

1 Ответ

2 голосов
/ 22 марта 2020

То, что вы можете сделать, это иметь тот же класс для div, и он связан button. При нажатии кнопки вы можете получить элементы, которые имеют этот класс, и прокрутить до первого элемента. 

$(document).ready(function() {
  $("button").click(function() {
    var element = $(this);
    var className = element.attr("class");
    var x = document.getElementsByClassName(className);
    $("html, body").animate(
      {
        scrollTop: $(x[0]).offset().top
      },
      2000
    );
  });
});
#div1 {
  background-color: red;
}
#div2 {
  background-color: yellow;
}

#div3 {
  background-color: green;
}

#div4 {
  background-color: blue;
}

#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">
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ducimus,
              natus rerum laborum ea ullam debitis qui aliquid repudiandae
              impedit. Praesentium totam pariatur odio fuga suscipit deleniti
              aliquid tenetur temporibus maiores! Lorem ipsum dolor, sit amet
              consectetur adipisicing elit. Porro ullam modi soluta doloribus
              rerum vero natus autem, maxime minima provident et obcaecati
              quisquam consequatur numquam unde odit facere. Eaque, corrupti?
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit
              asperiores quae repellendus rerum placeat voluptates iste sit
              dolores dignissimos tenetur? Id tempora dolores, velit nihil
              incidunt debitis! Tempora, accusamus modi. Lorem ipsum dolor sit,
              amet consectetur adipisicing elit. Ducimus, natus rerum laborum ea
              ullam debitis qui aliquid repudiandae impedit. Praesentium totam
              pariatur odio fuga suscipit deleniti aliquid tenetur temporibus
              maiores! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
              Porro ullam modi soluta doloribus rerum vero natus autem, maxime
              minima provident et obcaecati quisquam consequatur numquam unde
              odit facere. Eaque, corrupti? Lorem ipsum dolor sit amet
              consectetur adipisicing elit. Odit asperiores quae repellendus
              rerum placeat voluptates iste sit dolores dignissimos tenetur? Id
              tempora dolores, velit nihil incidunt debitis! Tempora, accusamus
              modi. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
              Ducimus, natus rerum laborum ea ullam debitis qui aliquid
              repudiandae impedit. Praesentium totam pariatur odio fuga suscipit
              deleniti aliquid tenetur temporibus maiores! Lorem ipsum dolor,
              sit amet consectetur adipisicing elit. Porro ullam modi soluta
              doloribus rerum vero natus autem, maxime minima provident et
              obcaecati quisquam consequatur numquam unde odit facere. Eaque,
              corrupti? Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Odit asperiores quae repellendus rerum placeat voluptates iste sit
              dolores dignissimos tenetur? Id tempora dolores, velit nihil
              incidunt debitis! Tempora, accusamus modi. Lorem ipsum dolor sit,
              amet consectetur adipisicing elit. Ducimus, natus rerum laborum ea
              ullam debitis qui aliquid repudiandae impedit. Praesentium totam
              pariatur odio fuga suscipit deleniti aliquid tenetur temporibus
              maiores! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
              Porro ullam modi soluta doloribus rerum vero natus autem, maxime
              minima provident et obcaecati quisquam consequatur numquam unde
              odit facere. Eaque, corrupti? Lorem ipsum dolor sit amet
              consectetur adipisicing elit. Odit asperiores quae repellendus
              rerum placeat voluptates iste sit dolores dignissimos tenetur? Id
              tempora dolores, velit nihil incidunt debitis! Tempora, accusamus
              modi.
            </div>
            <div id="div2" class="element2">
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ducimus,
              natus rerum laborum ea ullam debitis qui aliquid repudiandae
              impedit. Praesentium totam pariatur odio fuga suscipit deleniti
              aliquid tenetur temporibus maiores! Lorem ipsum dolor, sit amet
              consectetur adipisicing elit. Porro ullam modi soluta doloribus
              rerum vero natus autem, maxime minima provident et obcaecati
              quisquam consequatur numquam unde odit facere. Eaque, corrupti?
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit
              asperiores quae repellendus rerum placeat voluptates iste sit
              dolores dignissimos tenetur? Id tempora dolores, velit nihil
              incidunt debitis! Tempora, accusamus modi. Lorem ipsum dolor sit,
              amet consectetur adipisicing elit. Ducimus, natus rerum laborum ea
              ullam debitis qui aliquid repudiandae impedit. Praesentium totam
              pariatur odio fuga suscipit deleniti aliquid tenetur temporibus
              maiores! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
              Porro ullam modi soluta doloribus rerum vero natus autem, maxime
              minima provident et obcaecati quisquam consequatur numquam unde
              odit facere. Eaque, corrupti? Lorem ipsum dolor sit amet
              consectetur adipisicing elit. Odit asperiores quae repellendus
              rerum placeat voluptates iste sit dolores dignissimos tenetur? Id
              tempora dolores, velit nihil incidunt debitis! Tempora, accusamus
              modi. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
              Ducimus, natus rerum laborum ea ullam debitis qui aliquid
              repudiandae impedit. Praesentium totam pariatur odio fuga suscipit
              deleniti aliquid tenetur temporibus maiores! Lorem ipsum dolor,
              sit amet consectetur adipisicing elit. Porro ullam modi soluta
              doloribus rerum vero natus autem, maxime minima provident et
              obcaecati quisquam consequatur numquam unde odit facere. Eaque,
              corrupti? Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Odit asperiores quae repellendus rerum placeat voluptates iste sit
              dolores dignissimos tenetur? Id tempora dolores, velit nihil
              incidunt debitis! Tempora, accusamus modi. Lorem ipsum dolor sit,
              amet consectetur adipisicing elit. Ducimus, natus rerum laborum ea
              ullam debitis qui aliquid repudiandae impedit. Praesentium totam
              pariatur odio fuga suscipit deleniti aliquid tenetur temporibus
              maiores! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
              Porro ullam modi soluta doloribus rerum vero natus autem, maxime
              minima provident et obcaecati quisquam consequatur numquam unde
              odit facere. Eaque, corrupti? Lorem ipsum dolor sit amet
              consectetur adipisicing elit. Odit asperiores quae repellendus
              rerum placeat voluptates iste sit dolores dignissimos tenetur? Id
              tempora dolores, velit nihil incidunt debitis! Tempora, accusamus
              modi.
            </div>
            <div id="div3" class="element3">
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ducimus,
              natus rerum laborum ea ullam debitis qui aliquid repudiandae
              impedit. Praesentium totam pariatur odio fuga suscipit deleniti
              aliquid tenetur temporibus maiores! Lorem ipsum dolor, sit amet
              consectetur adipisicing elit. Porro ullam modi soluta doloribus
              rerum vero natus autem, maxime minima provident et obcaecati
              quisquam consequatur numquam unde odit facere. Eaque, corrupti?
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit
              asperiores quae repellendus rerum placeat voluptates iste sit
              dolores dignissimos tenetur? Id tempora dolores, velit nihil
              incidunt debitis! Tempora, accusamus modi. Lorem ipsum dolor sit,
              amet consectetur adipisicing elit. Ducimus, natus rerum laborum ea
              ullam debitis qui aliquid repudiandae impedit. Praesentium totam
              pariatur odio fuga suscipit deleniti aliquid tenetur temporibus
              maiores! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
              Porro ullam modi soluta doloribus rerum vero natus autem, maxime
              minima provident et obcaecati quisquam consequatur numquam unde
              odit facere. Eaque, corrupti? Lorem ipsum dolor sit amet
              consectetur adipisicing elit. Odit asperiores quae repellendus
              rerum placeat voluptates iste sit dolores dignissimos tenetur? Id
              tempora dolores, velit nihil incidunt debitis! Tempora, accusamus
              modi. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
              Ducimus, natus rerum laborum ea ullam debitis qui aliquid
              repudiandae impedit. Praesentium totam pariatur odio fuga suscipit
              deleniti aliquid tenetur temporibus maiores! Lorem ipsum dolor,
              sit amet consectetur adipisicing elit. Porro ullam modi soluta
              doloribus rerum vero natus autem, maxime minima provident et
              obcaecati quisquam consequatur numquam unde odit facere. Eaque,
              corrupti? Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Odit asperiores quae repellendus rerum placeat voluptates iste sit
              dolores dignissimos tenetur? Id tempora dolores, velit nihil
              incidunt debitis! Tempora, accusamus modi. Lorem ipsum dolor sit,
              amet consectetur adipisicing elit. Ducimus, natus rerum laborum ea
              ullam debitis qui aliquid repudiandae impedit. Praesentium totam
              pariatur odio fuga suscipit deleniti aliquid tenetur temporibus
              maiores! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
              Porro ullam modi soluta doloribus rerum vero natus autem, maxime
              minima provident et obcaecati quisquam consequatur numquam unde
              odit facere. Eaque, corrupti? Lorem ipsum dolor sit amet
              consectetur adipisicing elit. Odit asperiores quae repellendus
              rerum placeat voluptates iste sit dolores dignissimos tenetur? Id
              tempora dolores, velit nihil incidunt debitis! Tempora, accusamus
              modi.
            </div>
            <div id="div4" class="element4">
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ducimus,
              natus rerum laborum ea ullam debitis qui aliquid repudiandae
              impedit. Praesentium totam pariatur odio fuga suscipit deleniti
              aliquid tenetur temporibus maiores! Lorem ipsum dolor, sit amet
              consectetur adipisicing elit. Porro ullam modi soluta doloribus
              rerum vero natus autem, maxime minima provident et obcaecati
              quisquam consequatur numquam unde odit facere. Eaque, corrupti?
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit
              asperiores quae repellendus rerum placeat voluptates iste sit
              dolores dignissimos tenetur? Id tempora dolores, velit nihil
              incidunt debitis! Tempora, accusamus modi. Lorem ipsum dolor sit,
              amet consectetur adipisicing elit. Ducimus, natus rerum laborum ea
              ullam debitis qui aliquid repudiandae impedit. Praesentium totam
              pariatur odio fuga suscipit deleniti aliquid tenetur temporibus
              maiores! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
              Porro ullam modi soluta doloribus rerum vero natus autem, maxime
              minima provident et obcaecati quisquam consequatur numquam unde
              odit facere. Eaque, corrupti? Lorem ipsum dolor sit amet
              consectetur adipisicing elit. Odit asperiores quae repellendus
              rerum placeat voluptates iste sit dolores dignissimos tenetur? Id
              tempora dolores, velit nihil incidunt debitis! Tempora, accusamus
              modi. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
              Ducimus, natus rerum laborum ea ullam debitis qui aliquid
              repudiandae impedit. Praesentium totam pariatur odio fuga suscipit
              deleniti aliquid tenetur temporibus maiores! Lorem ipsum dolor,
              sit amet consectetur adipisicing elit. Porro ullam modi soluta
              doloribus rerum vero natus autem, maxime minima provident et
              obcaecati quisquam consequatur numquam unde odit facere. Eaque,
              corrupti? Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Odit asperiores quae repellendus rerum placeat voluptates iste sit
              dolores dignissimos tenetur? Id tempora dolores, velit nihil
              incidunt debitis! Tempora, accusamus modi. Lorem ipsum dolor sit,
              amet consectetur adipisicing elit. Ducimus, natus rerum laborum ea
              ullam debitis qui aliquid repudiandae impedit. Praesentium totam
              pariatur odio fuga suscipit deleniti aliquid tenetur temporibus
              maiores! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
              Porro ullam modi soluta doloribus rerum vero natus autem, maxime
              minima provident et obcaecati quisquam consequatur numquam unde
              odit facere. Eaque, corrupti? Lorem ipsum dolor sit amet
              consectetur adipisicing elit. Odit asperiores quae repellendus
              rerum placeat voluptates iste sit dolores dignissimos tenetur? Id
              tempora dolores, velit nihil incidunt debitis! Tempora, accusamus
              modi.
            </div>
          </div>
        </div>

        <div class="col-4">
          <div id="right-div">
            <button id="btn1" class="element1">Bt1</button>
            <button id="btn2" class="element2">Btn2</button>
            <button id="btn3" class="element3">Btn3</button>
            <button id="btn4" class="element4">Btn4</button>
          </div>
        </div>
      </div>
    </div>

    <script src="./index.js"></script>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...