Можно ли переделать скрипт плавного скролла?

Question

[Underdoggit]

Есть скрипт плавного скрола срабатывающего от 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);

Можно ли сделать так, что бы кнопка срабатывала якорем по той же функции что и ссылка -

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

Только href в скрипте, был заменен на action - плавный переход к id нужного блока, попробовал в скрипте просто изменить href на action. Не работает
UPD: пытаюсь сделать для того что бы не плодить лишний css код, так как кнопки одинаковые, и стили прописаны для всех, не хотелось бы лепить отдельную ссылку с оформлением под эту кнопку

Answer 1

[askhat]

<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);

Comments

[Underdoggit]

Спасибо, отличный вариант

Answer 2

[Eugene Chefranov]

Сделайте кнопку просто ссылкой <a href="#block">Перейти</a> и сделайте ей стиль похожий на кнопку

Comments

[Underdoggit]

UPD: пытаюсь сделать для того что бы не плодить лишний css код, так как кнопки одинаковые, и стили прописаны для всех, не хотелось бы лепить отдельную ссылку с оформлением под эту кнопку

Answer 3

[Виктор]

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

https://jsfiddle.net/c6rmegtx/