jquery scrollTop works but doesn't move the scrollbar

Question

I'm having a DIV loaded via $.load() function. On complete, I execute $('#my_div').scrollTop(0);

It works, the content is visible from first line, but, and this is the problem, the left scrollbar, added from browser to allow user to scroll div content, is not moved, it stay where was before .scrollTop().

So if my user manually scroll down to bottom, then ask for data refresh, the data will be refreshed, and the content will be visible from first line, but scrollbar remain at bottom, so if the user clicks, the content will be scrolled down to bottom !

Is there a way to force browser to redraw the div or something to do to have even the scrollbar scrolled to top ?

EDIT 1: I tried to remove the div itself from the dom, add a 'loading' text, then recreate again after load is complete, but nothing changes...

EDIT 2: i'm NOT scrolling at the top of the page, it's a modal (i'm using twitter bootstrap)

EDIT 3: this is my modal

<!-- Modal di verifica duplicati -->
<div id="fullDataModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="fullDataModal" aria-hidden="true">
    <div class="modal-body">
        <i class="icon-spinner icon-spin"></i> 
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true"><?php echo Yii::t('General','close'); ?></button>
    </div>
</div>

And this is javascript code

        $("DIV#fullDataModal DIV.modal-body")
            .load ("'. $this->createUrl("view", array("ajax" => true, "id" => $model->id))  .'"+contact_id, function(){
                $("DIV.modal-body").scrollTop( 0 );
            });

Please note: accidentally this works !

$("DIV.modal-body").scrollTop( 1 );

Why ?

if it works then you should answer yourself and close the question — CME64, Jun 17 '13 at 09:21
Uhm... it's not working .. it works using a trick, so it is not working.. — realtebo, Jun 17 '13 at 13:47
I had the same issue and this worked: $("DIV.modal-body").scrollTop( 1 ); — Aidin, Nov 13 '14 at 22:37

score 2 · Accepted Answer · answered Jun 17 '13 at 08:43

2

try this

$(document).scrollTop($('#my_div').offset().top);

answered Jun 17 '13 at 08:43

CME64

1,673
13
24

if you are scrolling to the top of the page why not use window.location.href = '#' ? – CME64 Jun 17 '13 at 08:49
Sorry, really, it's works, but the sroll itself is not 'precise'. It scroll to the 'half' of the title, so, it's not the 'top', but 'near the top'... – realtebo Jun 17 '13 at 08:49
I edit the question: i'm not scrolling the page, i'm scrolling in a modal created using twitter bootstrap – realtebo Jun 17 '13 at 08:50
yes this code scrolls to the element not the top of the page ,, if you want the top use $(document).scrollTop() – CME64 Jun 17 '13 at 08:51
if your case is different please add your code to the question – CME64 Jun 17 '13 at 08:52
I added my html and my javascript, please not that i found an 'accidentally working' workaround – realtebo Jun 17 '13 at 08:57
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/31855/discussion-between-cme64-and-realtebo) – CME64 Jun 17 '13 at 09:01
something seems wrong with loading ,, could you join the chat discussion ? – CME64 Jun 17 '13 at 09:11
Did you ever figure out why `$("DIV.modal-body").scrollTop(0);` didn't redraw the scroll bar but `$("DIV.modal-body").scrollTop(1);` does? I'm seeing the same behavior when dealing with a UL I'm hiding and showing when I'm repopulating it. `.scrollTop(1);` works for me too, but I'm also curious as to why. – PrinceTyke Jul 17 '15 at 13:14

score 1 · Answer 2 · answered Jun 10 '16 at 22:35

1

Based on the scrollTop(1) workaround, the following works:

$("#mydiv").scrollTop(1).scrollTop(0)

answered Jun 10 '16 at 22:35

Lorne

11
2

jquery scrollTop works but doesn't move the scrollbar

2 Answers2

Linked