问题
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?
This is my code:
<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:
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>来源：https://stackoverflow.com/questions/60793132/problem-in-animate-scrolltop-for-multi-div