0

I have a this div

<div style="overflow: scroll; height: 100vh;" id="sentences">

and want to scroll the to specific child div by below code

$("#sentences").scrollTo(0, $("#sentence_" + part_number).position().top);

But doen't scroll at all. I've tried most of other related answers on stackoverflow.

How can I scroll to wanted div?

user6022289
  • 65
  • 1
  • 7
  • Umm there should be some sort of event right?? like onclick ,on hover then only your scroll will work,please share the complete code – Shubh Feb 19 '19 at 09:34
  • Like said before me you need a click event (or any event) that would trigger that scroll. Did you check this: https://stackoverflow.com/questions/6677035/jquery-scroll-to-element – Radu Chiriac Feb 19 '19 at 09:36

1 Answers1

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>
Vipin Kumar Soni
  • 829
  • 9
  • 18