how to scroll to top automatic when closing a div with toggle()

Question

I have a issue with scrolltop. I have a div which slides down and up with toggle(). This div is pretty long with lots of content and its height is set to 300px.

ex:

<div id="divlidiv" style="display:none">
lots of lots of lots of words and stuff..lots of lots of lots of words and stuff..
lots of lots of lots of words and stuff..
lots of lots of lots of words and stuff..

and so on, and so on, and so on ;)
</div>

and to display this div I use a link which toggles the div

<a onclick="ShowDiv()" title="">Toggle tha stuff</a>

the function "ShowDiv()" looks like this:

function ShowDiv() {
$('#divlidiv').slideToggle(3500); 
}

And HERE is my "issue":

When I close the div and re-opens it the content is not displayed from the beginning, but where it was when I "closed" the div with the toggle-link.

How can I make it to scroll to the top of div when I close it so it's "on top" when I re-open it?

I have tried to use "scrollTop()" within the function to automatic scroll the top, when the div is closed/opened with the toggle.

function ShowDiv() {
$('#divlidiv').scrollTop(0);
$('#divlidiv').slideToggle(3500); 
}

I've tried to figure this one out for some time now, but I just can't figure it out.

I'm testing this out on Linux, with Chrome and Firefox, and it doesn't work with either of them.

I really hope someone here can help me out.

Answer 1

I tested your code in Chrome and it seems to be working.

Run the code snippet to see.

function ShowDiv() {
$('#divlidiv').scrollTop(0);
$('#divlidiv').slideToggle(3500); 
}

div{
  overflow: scroll;
  height: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divlidiv" style="display:none; border: 1px solid green">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquam enim ac augue vulputate sodales. Pellentesque ullamcorper euismod ante, in rhoncus sapien sollicitudin viverra. Curabitur a risus fringilla mauris eleifend consectetur et at justo. Sed id nibh egestas, sagittis nulla et, porta ante. Vestibulum aliquet dignissim tortor at semper. Maecenas magna ipsum, luctus ultricies dui ut, molestie ultricies velit. Etiam consectetur metus felis, et consequat elit vehicula sed. Nulla consequat bibendum ex, in sollicitudin massa semper non. Vivamus feugiat massa a vestibulum viverra. Proin hendrerit nec justo at sagittis. Aliquam id lacinia libero, sed dapibus magna. Praesent at hendrerit nibh. Cras vel hendrerit ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at posuere mi. Nullam at semper lacus, eget suscipit massa.

Proin vestibulum sagittis nunc. Fusce molestie egestas sapien ut rhoncus. Sed ultrices purus est, quis pharetra purus lacinia at. Quisque porttitor rutrum velit a vehicula. Nam pulvinar, sem eget facilisis dictum, nunc elit pretium dolor, et pellentesque tortor diam ut augue. Donec et tortor at justo sodales placerat vitae tristique arcu. Aliquam in massa eget tellus maximus sodales sit amet quis magna. Ut blandit magna vel ante efficitur tincidunt. Cras molestie augue justo, in ullamcorper neque suscipit ut. Etiam vel pharetra lorem. Etiam nec tincidunt elit, sed iaculis lectus. Mauris sodales tellus felis, ut fringilla mauris ultrices in.

Suspendisse ac pulvinar diam. Donec convallis at nulla imperdiet aliquet. Suspendisse tortor tellus, tempus id lorem eget, condimentum interdum sem. Morbi sollicitudin consectetur erat sit amet tempus. Vestibulum et interdum ipsum. Suspendisse quis risus feugiat, dignissim tortor rutrum, condimentum libero. Etiam malesuada tempus velit, quis malesuada nunc tincidunt ac. Vestibulum commodo odio et neque finibus euismod. Mauris lacinia, mauris nec sollicitudin sodales, arcu nunc semper urna, tincidunt ullamcorper erat libero ac quam. Morbi feugiat ex id elit gravida porttitor id ut nisi. Sed mollis turpis ante, et pharetra massa efficitur at. Integer non nibh dignissim, viverra purus at, efficitur lectus. Nam sollicitudin dictum magna, eget mattis sem faucibus a. Etiam eget semper justo, ac pretium erat. Nulla imperdiet laoreet odio a sodales. Curabitur vehicula consectetur ex, non viverra velit cursus nec.

Nulla blandit tempor convallis. Sed sit amet ipsum vitae odio molestie vulputate. Vestibulum nunc quam, blandit id laoreet convallis, cursus sed tortor. Pellentesque sed arcu justo. Proin aliquam lectus in neque aliquet, a tincidunt augue vulputate. Curabitur dictum congue ligula in pretium. Sed massa lacus, pellentesque eget felis a, dignissim mollis ex. Proin facilisis lectus quam, at tempus libero porttitor eu. Nulla facilisi. Donec eget congue ante, ut suscipit risus. Pellentesque imperdiet mollis odio, sed scelerisque eros efficitur non. Suspendisse fermentum arcu eget lorem sagittis finibus. Proin quis auctor dolor, id euismod risus. Aliquam erat volutpat.

Cras eu massa et dui dictum vulputate. Donec ornare tellus in velit venenatis, a tempor est luctus. Nulla facilisi. Phasellus varius nunc at orci ullamcorper, eu ultricies lorem fringilla. Nulla eget dolor eget neque bibendum bibendum. Aliquam vitae convallis velit, eu aliquam augue. Suspendisse efficitur turpis non leo euismod, ac pellentesque lacus pharetra. Aenean nec finibus nibh. Pellentesque pharetra ut tellus ac gravida.
</div>
<a onclick="ShowDiv()" title="">Toggle tha stuff</a>