Scroll div top on page load then set scroll to work normally

问题

I have a chat system on my site and defaulted the message div position to always display the last message on page load. I accomplished this by using the following line of code:

  msgDiv = document.getElementById('message_row_large');
  msgDiv.scrollTop = msgDiv.scrollHeight;

However, this code sets the scroll position to be equal to the div height at all times, which doesn't allow users to scroll up and see other messages.

I need to re-enable scroll to its default functionality after the page loads. ANy help is welcome.

Thank you!

P.S. I am using ajax to load chat messages. When user clicks on a name on the left hand panel, the chat between him/her and the other person loads on the right hand panel.

回答1:

Try

    $display = $('#message_row_large');
    $display.animate({scrollTop: $display[0].scrollHeight }, 'fast');

Working Fiddle:

https://jsfiddle.net/cshanno/3bo48dxj/1/

来源：https://stackoverflow.com/questions/32318922/scroll-div-top-on-page-load-then-set-scroll-to-work-normally