← Модули · Тильда · Zero Block

Бесплатный модуль, чтобы посмотреть уровень. Нужен такой же под ваш макет — закажите доработку.

Файлы

Инструкция

1. Добавьте на страницу Zero Block с кнопкой (класс .js-sticky-cta).
2. В настройках страницы → HTML-код перед </body> вставьте CSS и JS ниже.
3. Укажите якорь формы в data-target="#form" у кнопки.
4. Опубликуйте страницу и проверьте на мобильном.

Код

/* sticky-cta.css */
.js-sticky-cta-wrap{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:50;
  display:none; justify-content:center; pointer-events:none;
}
.js-sticky-cta-wrap.is-on{ display:flex; }
.js-sticky-cta{
  pointer-events:auto; border:0; border-radius:999px;
  padding:14px 22px; font:700 15px/1 Manrope,sans-serif;
  background:#c6f26d; color:#132010; cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* sticky-cta.js */
(function(){
  var btn=document.querySelector('.js-sticky-cta');
  var wrap=document.querySelector('.js-sticky-cta-wrap');
  if(!btn||!wrap) return;
  var target=document.querySelector(btn.getAttribute('data-target')||'#form');
  function sync(){
    var y=window.scrollY||0;
    wrap.classList.toggle('is-on', y>420);
  }
  btn.addEventListener('click', function(){
    if(target) target.scrollIntoView({behavior:'smooth', block:'start'});
  });
  window.addEventListener('scroll', sync, {passive:true});
  sync();
})();