[just-for-rem]

Доброго времени суток!
Такая проблема: переделывал меню сайта, исправлял косяк с якорями, но вылез другой
Сайт на modx, имеется дестопная и мобильная версии (вёрстка одинаковая), на десктопе при переходах по якорям главной страницs всё нормально, а на мобильной происходит такой глюк: нажимаешь на 1 ссылку на якорь - переходит нормально, подымаешься наверх, нажимаешь на другую ссылку на др. якорь - страница сначала листается до 1-го якоря, а потом уже до 2-го. И чем больше переходов - тем "веселее" такая карусель. Пробовал 2 варианта реализации:
1 вариант.
Меню:

<ul>
<li class="level0">
	<a title="Наша корпоративная жизнь и результаты работы" class="toAnchor" data-txt="about">О компании</a>
</li>
<li class="level0">
	<a title="Проектирование, монтаж, сервис" class="toAnchor" data-txt="service">Услуги</a>
</li>
<li class="level0">
	<a title="Оборудование, техническая информация" class="toAnchor" data-txt="catalog">Каталог продукции</a>
</li>
<li class="level0">
	<a href="/monitoring#inform" title="Система мониторинга и управления" class="toAnchor">Показания</a>
</li>
<li class="level0">
	<a title="Информация о нашем расположении, телефонах, филиалах и партнёрах" class="toAnchor" data-txt="contacts">Контакты</a>
</li>
<ul>

Пример 1-го из якорей:

<div>
	<a name="catalog" class="for_fix_menu"></a>
</div>

Сам скрипт:

$(document).ready(function(){
            $('.toAnchor').click(function(e){
                e.preventDefault();
                if($('.fixed_top').is(':hidden')) {
                    $('.toAnchor').on("click", function () {
                        $('html, body').animate({ scrollTop:  $('a[name="main"]').offset().top}, 400 );
                        $('html, body').animate({ scrollTop:  $('a[name="'+$(this).data('txt')+'"]').offset().top}, 1000);
                        return false;
                    });
                }
                else {
                    $('html, body').animate({ scrollTop:  $('a[name="'+$(this).data('txt')+'"]').offset().top}, 1000);
                    return false;
                }
            });
        });

2 вариант.
Меню:

<ul>
<li class="level0">
	<a title="Наша корпоративная жизнь и результаты работы" class="toAnchor" onclick="scrollToContent('about')">О компании</a>
</li>
<li class="level0">
	<a title="Проектирование, монтаж, сервис" class="toAnchor" onclick="scrollToContent('service')">Услуги</a>
</li>
<li class="level0">
	<a title="Оборудование, техническая информация" class="toAnchor" onclick="scrollToContent('catalog')">Каталог продукции</a>
</li>
<li class="level0">
	<a href="/monitoring#inform" title="Система мониторинга и управления" class="toAnchor">Показания</a>
</li>
<li class="level0">
	<a title="Информация о нашем расположении, телефонах, филиалах и партнёрах" class="toAnchor" onclick="scrollToContent('contacts')">Контакты</a>
</li>
<ul>

Пример 1-го из якорей:

<div>
	<a name="catalog" class="for_fix_menu"></a>
</div>

Сам скрипт:

function scrollToContent(anchor) {
            if($('.fixed_top').is(':hidden')) {
                $('.toAnchor').on("click", function () {
                    $('html, body').animate({ scrollTop:  $('a[name="main"]').offset().top}, 500 );
                    $('html, body').animate({ scrollTop:  $('a[name="'+anchor+'"]').offset().top}, 1000);
                    return false;
                });
            }
            else {
                $('html, body').animate({ scrollTop:  $('a[name="'+anchor+'"]').offset().top}, 1000);
                return false;
            }
        }

Оба варианта приводят к такому развитию событий... Что не так? Я в js не особо, мне как-то ближе php и C#, но приходится углубляться