не работает функция из-за display:none

Проблема действительно в display:none, так как нельзя прокрутить элемент, если у него нет прокрутки.

Обойти можно несколькими путями:

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

2. сделать элемент видимым, прокрутить, скрыть элемент
   Например:

   $('.chat').show().scrollTop(100000).hide(); // эта функция не выполняется из-за display:none, если убрать это свойство то она заработает. 
   $('#chat-click').click(function() { 
     $('.chat').toggle(); 
   }); 
    
    

   .chat { 
     display: none; 
     height: 100px; 
     overflow-y: scroll; 
     width: 300px 
   } 
    
    

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script> 
   <div class="chat"> 
     <li>message</li> 
     <li>message</li> 
     <li>message</li> 
     <li>message</li> 
     <li>message</li> 
     <li>message</li> 
     <li>message</li> 
     <li>message</li> 
     <li>message</li> 
     <li>message</li> 
     <li>message</li> 
     <li>message</li> 
   </div> 
    
   <button id="chat-click">OPEN/CLOSE</button> 
    
    

3. убрать из класса display:none, прокрутить элемент и скрыть его

   $('.chat').scrollTop(100000).hide(); // эта функция не выполняется из-за display:none, если убрать это свойство то она заработает. 
   $('#chat-click').click(function() { 
     $('.chat').toggle(); 
   });

   .chat { 
     height: 100px; 
     overflow-y: scroll; 
     width: 300px 
   }

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script> 
   <div class="chat"> 
     <li>message</li> 
     <li>message</li> 
     <li>message</li> 
     <li>message</li> 
     <li>message</li> 
     <li>message</li> 
     <li>message</li> 
     <li>message</li> 
     <li>message</li> 
     <li>message</li> 
     <li>message</li> 
     <li>message</li> 
   </div> 
    
   <button id="chat-click">OPEN/CLOSE</button>

 $('#chat-click').click(function() { 
   $('.chat').toggle(); 
   $('.chat').scrollTop(100000);  
 }); 
  
 

.chat { 
  display:none; 
  height:100px; 
  overflow-y:scroll; 
  width:300px 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="chat"> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
</div> 
 
<button id="chat-click">OPEN/CLOSE</button>

Пришел к такому решению. Чтобы при каждом нажатии на кнопку - выполнялась функция.