我有这个div
<div style="overflow: scroll; height: 100vh;" id="sentences">
,并想通过以下代码滚动到特定的子div
$("#sentences").scrollTo(0, $("#sentence_" + part_number).position().top);
但是根本不滚动。我已经在stackoverflow上尝试了其他大多数相关答案。
如何滚动到想要的div?
答案 0 :(得分:3)
<!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>