Как настроить Якорную ссылку плавный переход?

Question

[olchagmk]

Добрый день есть сайт, на нем нужно поставить 2 якорные ссылки. Ниже сам сайт:
b.seleznqu.beget.tech/company/how-to-buy/ipo.php
Проблема в том, что 1 якорь работает отлично. А второй почему-то не скролит.
Вот первый якорь:

<div class="card-sm__text" id="scroll11">
по&nbsp;телефону&nbsp;
<a class="ym__phone" href="tel:[phone]">[phone]</a> или
<a href="#feedback_f1" class="link" data-name="callback">Заказать обратный звонок</a>;
</div>

Вот второй якорь:

<div class="card-sm__text" id="scroll12">
	по&nbsp;телефону&nbsp;
<a class="ym__phone" href="tel:[phone]">8 [phone]</a> или
	<a href="#feedback_f1" class="link" data-event="jqm" data-param-id="17" data-name="callback">Заказать обратный звонок</a>;
</div>

Вот JS:

$("#scroll11").on("click","a", function (event) {
      event.preventDefault();
      var id  = $(this).attr('href'),
      top = $(id).offset().top;
      $('body,html').animate({scrollTop: top}, 1000);
    });
    $("#scroll12").on("click","a", function (event) {
      event.preventDefault();
      var id  = $(this).attr('href'),
      top = $(id).offset().top;
      $('body,html').animate({scrollTop: top}, 1000);
    });

Не могу понять, почему второй не работает нормально?
На сайте мы пока указали фиксированный скролл, т.е. top = 2200;
В чём может быть проблема?

Answer 1

[kryamk]

А зачем js, для тренировки? И так ведь должен по клику переходить к нужному блоку

Comments

[olchagmk]

Нужен плавный переход

[kryamk]

body можно прописать scroll-behavior: smooth; для плавности

[lkalktus]

Что то Вы перемудрили с js. А если 10 якорей или больше.
Вот пример:
JS

$('a[href^="#"]').click(function(){
let anchor = $(this).attr('href');
$('html, body').animate({
scrollTop:  $(anchor).offset().top
}, 600);
});

Html

<a href="#1">1</a>
 <a href="#2">2</a>
 <a href="#3">3</a>
<div id="1">
... 
</div>
<div id="2">
... 
</div>
<div id="3">
... 
</div>