как прокрутить вверх автоматически при закрытии div с помощью toggle ()

Question

Yo!

У меня проблема с scrolltop ..

имеет div, который скользит вниз и вверх с помощью toggle ().

этот div довольно длинный смного контента и его высота установлена ​​в 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>

и для отображения этого div я использую ссылку, которая переключает div

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

функция "ShowDiv ()" выглядит следующим образом:

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

И ЗДЕСЬ - моя "проблема".

Когда я закрываю div и снова открываю его, содержимое не отображаетсяс самого начала, но где это было, когда я "закрыл" div с помощью переключателя ..

Как я могу сделать это, чтобы прокрутить к вершине div, когда я закрываю его, чтобы он был "сверху", когдая его снова открываю?

Я пытался использовать функцию «scrollTop ()» в функции для автоматической прокрутки верхней части, когда div закрывается / открывается с помощью переключателя.

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

Я пытался понять это в течение некоторого времени, но я просто не могу понять это ..

Я тестирую это на Linux, с Chrome и Firefox ..d это не работает ни с одним из них ..

Я действительно надеюсь, что кто-то здесь может мне помочь, с этим ..

С наилучшими пожеланиями, Киппи

Answer 1

Я протестировал ваш код в Chrome, и он, кажется, работает.

Запустите фрагмент кода, чтобы увидеть.

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>