JSFiddle - React, Tailwind, and code Playground

HTML

<select multiple="multiple" size="10" id="myselect">
<option>firstone</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>lastone</option>
</select>

<br/><br/>
<a id="me" href="">Scroll to last option</a>

CSS

.fields9 {font-size:15px;height: 180px; width:420px; border:1px solid #2d2b2d;}

JavaScript

scrollToLastOption = function() {
    var element = document.getElementById("myselect"),
        olen = element.options.length, i = olen,
        selCache = [], stVal;
    
    while(i--) {
        selCache[i] = element.options[i].selected;
    }
    
    // setting last option as selected results in scrolling to that option
    element.selectedIndex = olen-1;
    
    // once again loop through options and set values that were previously selected
    stVal = element.scrollTop;
    
    i = olen;
    while(i--) {
        element.options[i].selected = selCache[i];
    }
    
    // doesn't work on Opera (not tested on IE)
    element.scrollTop = stVal;
};

scrollToLastOption();

$(function() {
    $("#me").click(function(e) {
        e.preventDefault();
        scrollToLastOption();
    });
});