Независимо от того, какую технологию вы используете для плавной прокрутки, доступность очень важна. Например, если вы щёлкнете ссылку с адресом #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