ScrollTop прокручивается в неправильное место после detach() insertAfter()

У меня есть код jQuery для перемещения div в более позднее место в потоке, когда размер окна меньше 767 пикселей. Все работает нормально.

У меня также есть некоторый код jQuery для прокрутки основной навигации вниз к основному контенту после загрузки страницы, опять же, если устройство ‹ 767px.

Функция scrollTop работает нормально. Функция detach() + insertAfter() работает нормально.

Но…

На одной странице, на которую влияет код insertAfter(), код scrollTop прокручивается в неправильную область. Похоже, он прокручивается туда, где была якорь до того, как элементы были перемещены.

Любые идеи? Страница активна по адресу http://northqueensviewhomes.com/community (помните, что вам придется сжать окно браузера до увидеть любое из этих действий, и вам придется перезагрузить свое маленькое окно, чтобы увидеть функцию прокрутки).

Вот две функции и их вызовы…

function rearrangeHelpfulLinks() {
   var $theLinks = $('#quicklinks.rc.well');
   if (($theLinks).length) {
      if ($(window).width() <= 767) {
         $theLinks.detach().insertAfter('.core-copy');
      } else {
         $theLinks.detach().insertAfter('#main-nav');
      }
   }
}


function scrollOnSmallScreen() {
   if ($(window).width() <= 767) {
      $('html, body').animate({
         scrollTop: ($('#main').offset().top - 13)
      }, 3210, 'easeInOutExpo');
   }
}

и процедура insertAfter() вызывается при изменении размера окна…

$(window).resize(function() {
   rearrangeHelpfulLinks();
});

… и функция прокрутки вызывается при загрузке страницы (для полноты картины просто…)

   scrollOnSmallScreen();

Не уверен, что вам нужно что-то еще, чтобы помочь мне (опять же!), но я хотел бы получить прокрутку в нужное место, то есть просто к якорю, #main.

Вся помощь приветствуется.