Кто может помочь по Jquery + css

Кучу времени убил - и не осилил(

Заливаю чистый пример на файлообменник.

Проблемы две.

1) При прилете в нижний див и возвращении в верхний чуть не точно позиционируется шарик. Видать где то отступ с верху не правильный прописал. Это уже от усталости.

2) Глобальная. Хоть убей не могу понять как победить прыжок шарика вверх при первом вызове scrollToElement('#container-bottom');

Я понимаю, что смена position: relative; на position: fixed; в принципе непобедима в этом случае - что я пытался делать:

а) делать 3 шарика - при нажатии на scrollToElement('#container-bottom'); первый верхний шарик клонируеться (наивный я думал клон унаследует позицию от него), и погибает - а второй летит вниз.

б) через что то наподобии

$(window).on('scroll', function () {

var scrollTop     = $(window).scrollTop(),

elementOffset = $('#balloon-top').offset().top,

distance = (elementOffset - scrollTop);

$(".go-top").css('top', Math.round(distance)+'px');

});

в) играться с position: - релатив\фиксд\инхерит и тд

Ничего не помогает - видимо я слаб умом.

Если кто сможет помочь сделать как надо - шарик сверху при скролле мышкой (как и снизу) - никуда не летает - при нажатии на ссылку точно с того же места где был улетает в противоположный конец страницы - на точно такую же позицию в диве - и при нажатии еще раз там - возвращается на то же место.

Вопросы\предложения - в ЛС.

Архив - http://www.ex.ua/365280773825