Правильное позиционирование прокручиваемого содержимого div в адаптивном макете

Question

У меня есть адаптивный макет страницы, разделенный на 2 деления. Основная часть экрана - это прокручиваемый элемент y, меньшая - в полный рост.

Макет адаптивный, что дает:

• размер экрана мобильного устройства, 1 плитка на строка
• другие размеры экрана, несколько плиток на строку в зависимости от css точек останова

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

Когда вид на экран меняется, он всегда возвращает ноль, поэтому прокрутка возвращается к началу содержимого div.

Вот фрагмент кода:

$('.indexChar').click(function(event){
    var currentPos = $('#list').scrollTop();
    var scrollTo = $("#" + this.getAttribute('data-anchor')).position().top + currentPos;
    event.preventDefault();
    $('#list').animate({scrollTop:scrollTo}, 500);
});

Вот макет, когда он работает

div id=list   |
+-------------+-----+
|  #1         |  1  | -- these have a class of 'indexChar'
|             |     | -- and an attribute 'data-anchor' of 1,2,3
+-------------+-----+
|             |  2  |
|             |     |
+-------------+-----+
|             |  3  |
|             |     |
+-------------+-----+
|  #2         |
|             |
+-------------+
|             |
|             |
+-------------+
|             |
|             |
+-------------+
|  #3         |
|             |
+-------------+
|             |
|             |
+-------------+

, и вот пример макета, когда он все время возвращает ноль:

div id=list                 |
+------+------+------+------+-----+
|  #1  |      |      |      |  1  |
|      |      |      |      |     |
+------+------+------+------+-----+
|      |      |      |      |  2  |
|      |      |      |      |     |
+------+------+------+------+-----+
|      |  #2  |      |      |  3  |
|      |      |      |      |     |
+------+------+------+------+-----+
|      |      |      |      |
|      |      |      |      |
+------+------+------+------+
|      |      |      |      |
|      |      |      |      |
+------+------+------+------+
|      |      |  #3  |      |
|      |      |      |      |
+------+------+------+------+
|      |      |      |      |
|      |      |      |      |
+------+------+------+------+
|      |      |      |      |
|      |      |      |      |
+------+------+------+------+

Чего мне здесь не хватает, чтобы получить прокручиваемый div в go в правильное положение?