javascript - AJAX chat scroll If has more than 20-30 messages, scroll to bottom will work if user didnt scroll up -

I have a chat system:

Whenever there is a reload or a post, Then the AJAX scroll will return back to:

  var height = $ ('# chat') [0] .scrollHeight; $ ('#chats') scrollTop (height).   
   What am I trying to do:    
 When users scroll down, scroll down  No  affect some things that work when total messages  <30>   & gt;   (When there are more than 30 messages in the chat, I did not count.  
  var height = $ ('# chat') [0]. ScrollHeight; if ($ ('#chat'). Scrolltop ()> height) {$ ('# chat'). Scrolltop (height);}   
 This method works But once I cut my chat  
 why is this doing? My JS code is:  
  var earlier; var mayscroll; $ ('scratch '). (' Book ', function (event) {var element, height, scrolllight, scroll title; element = $ (this); scrolling = element. ScrollHit = Element.prop ('ScrollTit> gtc: (document) .ready (function () {var canPost; reload (); $ ("# login"). Submit (function (event) {Event.preventDefault (); $ .post ("ajax.php", {login: $ ("# guest"). Val ()}, function (data) {$ .post ("ajax.php", {send : "Chat that has joined"}, function () {location.reload ();});});}); $ ("# load") Click (function () {first} is true ; Reload first () $ ("# load"). Feeds ("slow"); $ ("# load") Html (''); }); $ ("#in Login"). Submit (function) {event.preventDefault (); $ .post ("ajax.php", {user name: $ ("# user"). Val ()}, {password: $ ("#pass") Val ()}, function (data) {if (data == 'true') {$ .post ("ajax.php", {send: "has joined chat"}, function () {location. Reload ();});} and {$ ("Errors"). Html (data);}});}); Submit $ ("send-message") (function (event) {$ ("# loading"). Show (); event.preventDefault (); if (canPost! = False) {if ($ (" # Message ") .val () Length & gt; {$ .post (" ajax.php ", {send: $ (" #moder "). Val ()}, function (data) {canPost = false; $ (".rors") .html (data); settimeout (function () {canPost = true;}, 500); if (first! = True) {reload ();} and {reload first ();} $ ("$ Error"). $ ("Error.") .HTML ("");} $ ("# loading") hide ();}); $ ("# message" ) .val ("");} and {$ ("error"). Html ("Your message is too small ..."); $ ("# loading") Hide ();}} and {$ (".err Or ") html (" Please wait 3 seconds before posting ... "); $ (" # loading ") Hide ();} ($ (" error. "). Val ()! = Null) {SetTimeout} {$ ("error.") .HTML ("");}, 3000);}}) SetInterval (function () {pingServer (); checkIfIneGayer ();}, 5000);} ); Var hold = "& lt; span style = 'color: lightblue; cursor: indicator;' gt; load first (30 more) 
 
 ; Function checkIfider () {if (first! = True) {$ .post ('ajax.php', {first: '1'}, function (data) {if (data> 30) {$ ("# load $ ("# Load"). $ FadeIn ("slow"); and {$ ("# load"). Feeds ("slow"); $ ("# load"). Html '');}}); }} Function pingServer () {$ .post ("ajax.php", {ping: "true"}, function () {if (previous! = True) {reload ();} else {reloadElier ();}} ); } Function reload () ($ .post ("ajax.php", {loadMessages: "1"}, function (data) {$ ("discussion."). Html (data) var height = $ ('# chat Scrolltop (height);}});} Reload the function () () ([']'; [0] .scrollHeight; if ($ ('# chat'). Scrollable ()> height) {$ ('# chat'). ($ .post (".jpg.php", {loadElier: "1"}, function (data) {$ ("discussion") .html (data); if (mayscroll == true) {var height = $ ( '# Chat') [0] .scrollHeight; $ ('# chat') ScrollTop (height);}}}}   
 This is my CSS:  
  #chat, .post-message {background-color: #fff; boundary: 1px solid RGBA (0,0,0,0.14); height: 450px; margin: 20p Such auto; overflow-y: scroll; width: 400px;}    
 
 
 : (See html / css to go with the code below)  
  function insertLine () {var scrollPosition = $ ("# chat"). ScrollTop (); Var scroll heights = $ ( "#Chat") [0] .scrollHeight; //console.log(scrollPosition,scrollHeight); $ ("#Chat") Attachments ("& lt; div> James: Hello World! "); If (scrollpoint + $ ("# chat"). Height () === scrollwheat) {$ ("# chat"). Scrollable (scrollwhite); } Settimeout (function () {insertLine ();}, (Math.floor (Math.Random) * 1000)))} insertLine ();   
 The code has not been optimized, it's just the concept.