Глючит переход по якорям

[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#, но приходится углубляться

[Malleys]

Независимо от того, какую технологию вы используете для плавной прокрутки, доступность очень важна. Например, если вы щёлкнете ссылку с адресом #hash, браузер сфокусируется на элементе, соответствующему этому идентификатору. Страница может прокручиваться, но прокрутка является побочным эффектом изменения фокуса.

<a href="#hash">Go to hash</a>
<!-- если нажать на такую ссылку, то произойдёт переход к элементу с таким же id -->
<p id="hash">Here you are!</p>

Именно такая техника называется переход по якорю. У вас же немного усложнено!

Что касается анимации, то вам следует использовать свойство scroll-behaviour, что касается старых браузеров, то нужно учитывать, что здесь важен переход, а не анимация! Поэтому это кроссбраузерный вариант.

Вот пример с вашими ссылками... (зачем изобретать велосипеды class="toAnchor" onclick="scrollToContent('catalog')" или data-txt="catalog", когда есть стандартное href="#catalog")

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style>
		
		html {
			scroll-behavior: smooth;
		}
		
		nav {
			text-align: center;
			background: white;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			padding: 10px;
		}
		
		nav a {
			display: inline-block;
			border-bottom: 1px solid;
			color: #199cff !important;
			cursor: pointer;
			margin: 0 13px;
			padding: 1px 0;
			text-decoration: none;
		}
		
		nav a:hover,
		nav a:focus {
			border-bottom: none;
			color: #fe0600 !important;
		}
	
		section {
			color: #080;
			border: solid;
			border-width: thin 0;
			background: #cfc;
			max-width: 50em;
			padding: 1em 2em;
			margin: 15em auto;
		}
		
	</style>
</head>
<body>
	<nav>
		<a href="#about" title="Наша корпоративная жизнь и результаты работы">О компании</a>
		<a href="#service" title="Проектирование, монтаж, сервис">Услуги</a>
		<a href="#catalog" title="Оборудование, техническая информация">Каталог продукции</a>
		<a href="/monitoring#inform" title="Система мониторинга и управления">Показания</a>
		<a href="#contacts" title="Информация о нашем расположении, телефонах, филиалах и партнёрах">Контакты</a>
	</nav>

	<!-- пример -->
	<section id="about">
		<h2>О компании</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, voluptas eius laudantium nihil. Fuga similique ducimus perferendis earum cumque cupiditate, voluptatem vitae hic suscipit eligendi odit, corporis ex quibusdam quam.</p>
	</section>
	
	<section id="service">
		<h2>Услуги</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione omnis quaerat minima sint eligendi! Maiores similique dolore iusto unde, iste odit fugit officiis earum deserunt distinctio eos magni pariatur sed?</p>
	</section>
	
	<section id="catalog">
		<h2>Каталог продукции</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex odio quis, culpa, molestias error omnis id doloribus velit. Obcaecati nemo quaerat aperiam quia quidem doloribus numquam, reprehenderit eligendi, magnam tempora!</p>
	</section>
	
	<section id="contacts">
		<h2>Контакты</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis pariatur nostrum consequuntur maiores qui expedita laboriosam voluptatem culpa repellendus voluptates saepe cumque, vel tempore, obcaecati nisi possimus hic. Beatae, quam.</p>
	</section>
</body>
</html>

P. S. <a href="/monitoring#inform" title="Система мониторинга и управления">Показания</a> не работает в данном примере, поскольку там нужна страница monitoring, на которой произойдёт переход к inform

[just-for-rem]

когда есть стандартное href="#catalog"

Я его изначально и использовал, но тогда якоря появлялись в адресной строке, что не очень красиво, поэтому и решил намутить сие

Именно такая техника называется переход по якорю. У вас же немного усложнено!

Я могу ошибаться, но разве не суть "перехода по якорю" - в самом якоре, а не в том, как осуществляется сам переход?))

P. S. <a href="/monitoring#inform" title="Система мониторинга и управления">Показания</a> не работает в данном примере, поскольку там нужна страница monitoring, на которой произойдёт переход к inform

Само собой, это понятно) Просто не стал её код выкладывать, ибо это излишняя информация)

<!-- пример -->

Спасибо большое!) Попробую вклинить это на наш сайт, вместо того, что есть, и отпишусь по результатам

[just-for-rem]

html {
            scroll-behavior: smooth;
        }

Получилось, спасибо! На мобильных работает почти (моё раскладывающееся меню слева не успевает полностью сложится до того, как начнётся прокрутка вниз) нормально, на десктопе ещё не менял. Подскажите, а как изменять скорость прокрутки у этого свойства? Погуглил-погуглил - ничего не нашёл даже на англоязычных сайтах(((

[Malleys]

Я его изначально и использовал, но тогда якоря появлялись в адресной строке... поэтому и решил намутить сие

Всё правильно, они должны там быть! Ведь если нажали на Контакты, по вы перейдёте к контактам и вы их видите. И если вы скопируете ссылку без якоря https://rem-prim.ru/ и поделитесь ею с кем-то, то тот человек не увидит тоже самое, что вы видите. Он увидит начало страницы. Но если у вас переход по якорю фиксируется в адресной строке, то вы уже копируете https://rem-prim.ru/#contacts и поделившись такой ссылкой, вы предоставляете возможность тем, кто будет переходить по ней, сразу попасть в раздел Контакты.

в адресной строке, что не очень красиво

Пользователи мобильных браузеров(52%) и Safari(14%) не видят этого. В мобильном браузере адресная строка не раскрывается, когда происходит переход по якорю. В Safari виден host, только если вы не сфокусированы на адресной строке.

[just-for-rem]

Всё правильно, они должны там быть! Ведь если нажали на Контакты, по вы перейдёте к контактам и вы их видите. И если вы скопируете ссылку без якоря https://rem-prim.ru/ и поделитесь ею с кем-то, то тот человек не увидит тоже самое, что вы видите. Он увидит начало страницы. Но если у вас переход по якорю фиксируется в адресной строке, то вы уже копируете https://rem-prim.ru/#contacts и поделившись такой ссылкой, вы предоставляете возможность тем, кто будет переходить по ней, сразу попасть в раздел Контакты.


Пользователи мобильных браузеров(52%) и Safari(14%) не видят этого. В мобильном браузере адресная строка не раскрывается, когда происходит переход по якорю. В Safari виден host, только если вы не сфокусированы на адресной строке.

А на счёт кастомизации вашего способа не подскажите? Как изменить скорость прокрутки?