scroll is going the wrong way

[redimongo]

So i have a json file with all the country codes and i have got it to add it to the menu (see code) however it seems that because am showing every country the list does not want to scroll to the beginning but instead scroll way past the last country

					<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--11-col getmdl-select getmdl-select__fix-height">
					 <input class="mdl-textfield__input" id="country" name="country" value="" type="text" readonly tabIndex="-1"/>
					   <label class="mdl-textfield__label" for="country">Country</label>
					   <ul id="countrymenu" class="mdl-menu mdl-menu--top-left mdl-js-menu" for="country">
						 
					   </ul>
				   </div>

and javascript

getJSON('/country.json').then(function(data) {
//    alert('Your Json result is:  ' + data.result); //you can comment this, i used it to debug
		//console.log("data: "+data);
		for (var p in data) {
			  var ul = document.getElementById("countrymenu");
				var li = document.createElement("li");
				li.setAttribute("data-val", p);
				li.setAttribute("class", "mdl-menu__item")
				li.appendChild(document.createTextNode(data[p]));
				ul.appendChild(li);
			
		}
		getmdlSelect.init(".getmdl-select");
	}, function(status) { //error detection....
	  alert('Something went wrong.');
	});

[JeckPikachan]

Fixed. Check out last commit.