Is it possible to remake the smooth scroll script?

Question

css

There is a script for smooth scrolling triggered by href:

$(".slowly").on("click", function (event) {
      /*Отменяем стандартную обработку нажатия по ссылке.*/
      event.preventDefault();
      /*Забираем идентификатор блока с атрибута href.*/
      var id = $(this).attr('href'),
      /*Узнаём высоту от начала страницы до блока, на который ссылается якорь.*/
      top = $(id).offset().top;
      /*Анимируем переход на расстояние - top за 1000ms.*/
      $('body,html').animate({scrollTop: top}, 1200);

Is it possible to make the button work as an anchor on the same function as the link -

<form action="#tutorial" class="slowly">
    <button class="button slogan-button hvr-bounce-in">
        <span>Перейти!</span>
    </button>
</form>

Only the href in the script was replaced by action - a smooth transition to the id of the desired block, I tried to simply change the href to action in the script. UPD does not work
: I'm trying to do it in order not to produce extra css code, since the buttons are the same, and the styles are prescribed for everyone, I would not want to sculpt a separate link with the design for this button

Answer 1

<button class="slowly" data-target="some_id">Take me there but slowly</button>

$(".slowly").on("click", function (event) {
      /*Отменяем стандартную обработку нажатия по ссылке.*/
      event.preventDefault();
      /*Забираем идентификатор блока с атрибута href.*/
      var id = $(this).attr('href') || $(this).attr('data-target');
      /*Узнаём высоту от начала страницы до блока, на который ссылается якорь.*/
      var top = $(id).offset().top;
      /*Анимируем переход на расстояние - top за 1000ms.*/
      $('body,html').animate({scrollTop: top}, 1200);

Answer 2

Make the button just a link <a href="#block">Перейти</a>and style it like a button

Answer 3

var id = $(this).attr('href') || $(this).attr('action'),

https://jsfiddle.net/c6rmegtx/