U
U
Underdoggit2018-05-17 15:57:14
css
Underdoggit, 2018-05-17 15:57:14

Is it possible to remake the smooth scroll script?

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 the question

In order to leave comments, you need to log in

3 answer(s)
A
Askhat Bikmetov, 2018-05-17
@Underdoggit

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

E
Eugene Chefranov, 2018-05-17
@Chefranov

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

V
Viktor, 2018-05-17
@futior

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

https://jsfiddle.net/c6rmegtx/

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question