Tengo un ul desplazable y varios elementos li . Mi objetivo es desplazarme hasta el elemento li con cierta identificación cuando el usuario presiona un botón.

Tengo un código que parece funcionar, pero hay dos problemas

1. Si me desplazo hacia abajo hasta el final de la lista mientras se carga la página, el botón ya no funciona. Comente y descomente la línea como se menciona en el código para ver a qué me refiero
2. Si ya estoy en el elemento buscado en la lista, quiero permanecer en el mismo lugar si presiono el botón de desplazamiento.

Supongo que ambos problemas se deben a algunas coordenadas relativas, pero no puedo entender cómo funciona este sistema. ¡Ayudame por favor!

HTML:

 <ul id="container"> <li id="1">stuff1</li> <li id="2">stuff2</li> <li id="3">stuff3</li> <li id="4">stuff4</li> <li id="5">stuff5</li> <li id="6">stuff6</li> <li id="7">stuff7</li> <li id="8">stuff8</li> <li id="9">stuff9</li> <li id="10">stuff10</li> <li id="11">stuff11</li> <li id="12">stuff12</li> <li id="13">stuff13</li> <li id="14">stuff14</li> <li id="15">stuff15</li> <li id="16">stuff16</li> </ul> <button id = 'btn'>Scroll to element with id = 9</button>

JS:

 var $container = $('#container')[0]; // $container.scrollTop = $container.scrollHeight; // If I uncomment the above line, the code does not work any more $('#btn').click(function(){ $container.scrollTop = $('#9').position().top; });

CSS:

 ul { overflow-y: auto; position: relative; height: 300px; width: 300px; background: red; } ul li { margin: 30px; border: solid; }

Ver el JSFiddle