Прокрутка до дочернего элемента прокручиваемого родительского элемента ⇐ Jquery

[Anonymous]

У меня есть прокручиваемый элемент ul и несколько элементов li. Моя цель — прокрутить до элемента li с определенным идентификатором, когда пользователь нажимает кнопку.

У меня есть код, который вроде бы работает, но есть две проблемы
[*]Если я прокрутлю список до конца при загрузке страницы, кнопка больше не будет работать. Закомментируйте и раскомментируйте строку, как указано в коде, чтобы понять, что я имею в виду. [*]Если я уже нахожусь на нужном элементе в списке, я хочу оставаться на том же месте, если нажму кнопку прокрутки.
Думаю, обе проблемы связаны с какими-то относительными координатами, но я не могу понять, как работает эта система. Помоги мне, пожалуйста!

HTML:

• stuff1
• stuff2
• stuff3
• stuff4
• вещи5
• вещи6
• вещи7
• вещи8
• вещи9
• stuff10
• stuff11
• stuff12
• stuff13
• stuff14
• stuff15
• stuff16

Перейти к элементу с идентификатором = 9 JS:

var $container = $('#container')[0]; // $container.scrollTop = $container.scrollHeight; // Если я раскомментирую приведенную выше строку, код больше не будет работать $('#btn').click(function(){ $container.scrollTop = $('#9').position().top; }); CSS:

ul { переполнение-у: авто; положение: относительное; высота: 300 пикселей; ширина: 300 пикселей; фон: красный; } ул ли { поле: 30 пикселей; граница: сплошная; } См. JSFiddle