Как сделать такую ​​кнопку вниз чтобы она прыгала?

Question

[Alexandr Lebedev]

Суть вопроса как сделать кнопку чтобы она прыгала и при нажатти скролила в низ?

dizz.in.ua/ru/services

Answer 1

[Роман Дворянов]

анимацию можно на css, скролл вниз на jquery, допустим у нас есть круглая кнопка в виде стрелки вниз(html) -

<a href="#second-screen" class="scroll-down-btn"></a>

Нам нужно повесить анимацию на кнопку(css) -

.scroll-down-btn {
/* Тут стили кнопки, картинки, размеры */
  position: relative;
  bottom: -15px;
  animation: bounce 0.4s infinite; /* Анимацию bounce пропишем ниже */
}

Ну и собственно сама анимация(css) -

@keyframe bounce {
  0 {
    bottom: 0;
  }
  100% {
    bottom: -15px;
  }
}

Ну а теперь нужно, чтоб эта кнопка работала(jQuery) -

$('.scroll-down-btn').on('click', function(e) {
  e.preventDefault(); // Запрещаем переход по ссылке
  var target: $(this).attr('href'), // Берем значение из ссылки как цель id="second-screen"
        destination: $(target).offset().top; // Ищем верхнюю координату у нашей цели

  $('body,html').animate({scrollTop: destination}, 500); // Плавно проматываем до цели
});

Answer 2

[Максим Тимофеев]

В данном случае используется jquery animate
откройте код страницы и поиском найдите ".down-scroll" там будет сам элемент и js который заставляет ее прыгать.

Comments

[Alexandr Lebedev]

Это плагин да?

[Максим Тимофеев]

это jquery

[Максим Тимофеев]

Почитайте jquery-docs.ru/Effects/animate

[Alexandr Lebedev]

Максим Тимофеев: Хорошо спасибо!

[dpismenny]

Максим Тимофеев: ничего подобного. прыгает кнопка на CSS:
animation: scrolldown .42s running alternate infinite;

а вот скролл при клике – это уже jQuery:
$('.down-scroll').click(function(){
$('body,html').animate({scrollTop: windowsHeigt}, 1100);
return false;
});

Answer 3

[Sanan Yuzb]

Можно и обычный keyframes использовать