为多div设置scrollTop的动画问题 [英] Problem in animate scrollTop for multi div
本文介绍了为多div设置scrollTop的动画问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有两个具有ID的div(#左div-#右div).在#left-div中，我具有id的multi div，并且#left-div的溢出-y是滚动.在#right-div中，我有带有ID的多个按钮.我想要在单击每个按钮之后，#左div滚动以显示该按钮单击的特定div.我用的是jquery.如何创建此动作?
I have two div with id (# left-div - # right-div). In # left-div i have multi div with id and # left-div's overflow-y is scroll. In # right-div i have multi button with id. I want after click on each button, # left-div scroll to show Specific div that button clicked. I use jquery. How to create this action?
这是我的代码:
<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>
推荐答案
您可以做的是为 div 使用相同的类，并将其与 button 相关联.单击按钮，您将获得具有该类的元素并滚动到第一个元素.
What you can do is have the same class for a div and it's associated button.when the button is clicked you can get elements which have that class and scroll to the first element.
$(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>这篇关于为多div设置scrollTop的动画问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
