我有一个这个div
<div style="overflow: scroll; height: 100vh;" id="sentences">
并且想通过下面的代码滚动到特定的子div
$("#sentences").scrollTo(0, $("#sentence_" + part_number).position().top);
但根本不要滚动。我已经尝试过 stackoverflow 上的大多数其他相关答案。
如何滚动到想要的 div？
最佳答案
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Tests</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(function(){
part_number = 18;
$("#sentences").scrollTop ($("#sentence_" + part_number).position().top);
});
</script>
</head>
<body>
<div style="overflow: scroll; height: 100vh;" id="sentences">
<div id="sentence_1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id metus quis ante vestibulum blandit sed eu felis. Nulla varius, velit eget dictum fermentum, neque ligula hendrerit massa, a porta libero felis id odio. Phasellus iaculis urna at metus lacinia maximus. Sed blandit, dui maximus porta ullamcorper, nisi neque vehicula leo, non mollis diam tellus nec dui. In efficitur tortor ac erat tincidunt, sit amet commodo lorem tristique. Nulla quis velit sapien. Morbi sed lacus finibus, rhoncus risus vel, vulputate elit. Pellentesque eu mollis orci, sed hendrerit tortor. Donec tristique eros vel dolor sodales tempus. Quisque hendrerit lacinia ultricies. Pellentesque consectetur, sem ut egestas elementum, velit mauris vehicula risus, vel congue arcu nunc sed ante.</div>
<div id="sentence_10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id metus quis ante vestibulum blandit sed eu felis. Nulla varius, velit eget dictum fermentum, neque ligula hendrerit massa, a porta libero felis id odio. Phasellus iaculis urna at metus lacinia maximus. Sed blandit, dui maximus porta ullamcorper, nisi neque vehicula leo, non mollis diam tellus nec dui. In efficitur tortor ac erat tincidunt, sit amet commodo lorem tristique. Nulla quis velit sapien. Morbi sed lacus finibus, rhoncus risus vel, vulputate elit. Pellentesque eu mollis orci, sed hendrerit tortor. Donec tristique eros vel dolor sodales tempus. Quisque hendrerit lacinia ultricies. Pellentesque consectetur, sem ut egestas elementum, velit mauris vehicula risus, vel congue arcu nunc sed ante.</div>
<div id="sentence_11">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id metus quis ante vestibulum blandit sed eu felis. Nulla varius, velit eget dictum fermentum, neque ligula hendrerit massa, a porta libero felis id odio. Phasellus iaculis urna at metus lacinia maximus. Sed blandit, dui maximus porta ullamcorper, nisi neque vehicula leo, non mollis diam tellus nec dui. In efficitur tortor ac erat tincidunt, sit amet commodo lorem tristique. Nulla quis velit sapien. Morbi sed lacus finibus, rhoncus risus vel, vulputate elit. Pellentesque eu mollis orci, sed hendrerit tortor. Donec tristique eros vel dolor sodales tempus. Quisque hendrerit lacinia ultricies. Pellentesque consectetur, sem ut egestas elementum, velit mauris vehicula risus, vel congue arcu nunc sed ante.</div>
<div id="sentence_12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id metus quis ante vestibulum blandit sed eu felis. Nulla varius, velit eget dictum fermentum, neque ligula hendrerit massa, a porta libero felis id odio. Phasellus iaculis urna at metus lacinia maximus. Sed blandit, dui maximus porta ullamcorper, nisi neque vehicula leo, non mollis diam tellus nec dui. In efficitur tortor ac erat tincidunt, sit amet commodo lorem tristique. Nulla quis velit sapien. Morbi sed lacus finibus, rhoncus risus vel, vulputate elit. Pellentesque eu mollis orci, sed hendrerit tortor. Donec tristique eros vel dolor sodales tempus. Quisque hendrerit lacinia ultricies. Pellentesque consectetur, sem ut egestas elementum, velit mauris vehicula risus, vel congue arcu nunc sed ante.</div>
<div id="sentence_13">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id metus quis ante vestibulum blandit sed eu felis. Nulla varius, velit eget dictum fermentum, neque ligula hendrerit massa, a porta libero felis id odio. Phasellus iaculis urna at metus lacinia maximus. Sed blandit, dui maximus porta ullamcorper, nisi neque vehicula leo, non mollis diam tellus nec dui. In efficitur tortor ac erat tincidunt, sit amet commodo lorem tristique. Nulla quis velit sapien. Morbi sed lacus finibus, rhoncus risus vel, vulputate elit. Pellentesque eu mollis orci, sed hendrerit tortor. Donec tristique eros vel dolor sodales tempus. Quisque hendrerit lacinia ultricies. Pellentesque consectetur, sem ut egestas elementum, velit mauris vehicula risus, vel congue arcu nunc sed ante.</div>
<div id="sentence_14">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id metus quis ante vestibulum blandit sed eu felis. Nulla varius, velit eget dictum fermentum, neque ligula hendrerit massa, a porta libero felis id odio. Phasellus iaculis urna at metus lacinia maximus. Sed blandit, dui maximus porta ullamcorper, nisi neque vehicula leo, non mollis diam tellus nec dui. In efficitur tortor ac erat tincidunt, sit amet commodo lorem tristique. Nulla quis velit sapien. Morbi sed lacus finibus, rhoncus risus vel, vulputate elit. Pellentesque eu mollis orci, sed hendrerit tortor. Donec tristique eros vel dolor sodales tempus. Quisque hendrerit lacinia ultricies. Pellentesque consectetur, sem ut egestas elementum, velit mauris vehicula risus, vel congue arcu nunc sed ante.</div>
<div id="sentence_15">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id metus quis ante vestibulum blandit sed eu felis. Nulla varius, velit eget dictum fermentum, neque ligula hendrerit massa, a porta libero felis id odio. Phasellus iaculis urna at metus lacinia maximus. Sed blandit, dui maximus porta ullamcorper, nisi neque vehicula leo, non mollis diam tellus nec dui. In efficitur tortor ac erat tincidunt, sit amet commodo lorem tristique. Nulla quis velit sapien. Morbi sed lacus finibus, rhoncus risus vel, vulputate elit. Pellentesque eu mollis orci, sed hendrerit tortor. Donec tristique eros vel dolor sodales tempus. Quisque hendrerit lacinia ultricies. Pellentesque consectetur, sem ut egestas elementum, velit mauris vehicula risus, vel congue arcu nunc sed ante.</div>
<div id="sentence_16">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id metus quis ante vestibulum blandit sed eu felis. Nulla varius, velit eget dictum fermentum, neque ligula hendrerit massa, a porta libero felis id odio. Phasellus iaculis urna at metus lacinia maximus. Sed blandit, dui maximus porta ullamcorper, nisi neque vehicula leo, non mollis diam tellus nec dui. In efficitur tortor ac erat tincidunt, sit amet commodo lorem tristique. Nulla quis velit sapien. Morbi sed lacus finibus, rhoncus risus vel, vulputate elit. Pellentesque eu mollis orci, sed hendrerit tortor. Donec tristique eros vel dolor sodales tempus. Quisque hendrerit lacinia ultricies. Pellentesque consectetur, sem ut egestas elementum, velit mauris vehicula risus, vel congue arcu nunc sed ante.</div>
<div id="sentence_17">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id metus quis ante vestibulum blandit sed eu felis. Nulla varius, velit eget dictum fermentum, neque ligula hendrerit massa, a porta libero felis id odio. Phasellus iaculis urna at metus lacinia maximus. Sed blandit, dui maximus porta ullamcorper, nisi neque vehicula leo, non mollis diam tellus nec dui. In efficitur tortor ac erat tincidunt, sit amet commodo lorem tristique. Nulla quis velit sapien. Morbi sed lacus finibus, rhoncus risus vel, vulputate elit. Pellentesque eu mollis orci, sed hendrerit tortor. Donec tristique eros vel dolor sodales tempus. Quisque hendrerit lacinia ultricies. Pellentesque consectetur, sem ut egestas elementum, velit mauris vehicula risus, vel congue arcu nunc sed ante.</div>
<div id="sentence_18">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id metus quis ante vestibulum blandit sed eu felis. Nulla varius, velit eget dictum fermentum, neque ligula hendrerit massa, a porta libero felis id odio. Phasellus iaculis urna at metus lacinia maximus. Sed blandit, dui maximus porta ullamcorper, nisi neque vehicula leo, non mollis diam tellus nec dui. In efficitur tortor ac erat tincidunt, sit amet commodo lorem tristique. Nulla quis velit sapien. Morbi sed lacus finibus, rhoncus risus vel, vulputate elit. Pellentesque eu mollis orci, sed hendrerit tortor. Donec tristique eros vel dolor sodales tempus. Quisque hendrerit lacinia ultricies. Pellentesque consectetur, sem ut egestas elementum, velit mauris vehicula risus, vel congue arcu nunc sed ante.</div>
</div>
</body>
</html>
关于javascript - 滚动到 jquery 或 js 中的子 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54762825/