Лучше всего с этим справится scrollIntoView:

/* html */
​        
<div>Форма</div>
​        
<button>Кнопка</button>
/* css */
​        
/* Расположим псевдоформу 
где-то за границами экрана */
div {
  background: lightgreen;
  margin: 100vh 0;
  height: 200px;
}
​        
/* Зафиксируем кнопку */
button {
  position: fixed; 
  top: 10px;
}
/* js */
​        
// Выберем кнопку и форму
const $button = document.querySelector('button');
const $form = document.querySelector('div');
​        
// При клике на кнопку
$button.addEventListener('click', e => {
  // Прокрутим страницу к форме 
  $form.scrollIntoView({ 
    block: 'nearest', // к ближайшей границе экрана
    behavior: 'smooth', // и плавно 
  });
});

К сожалению, в Сафари и Эдже плавность прокрутки пока не поддерживается. Для того, чтобы она появилась, подключите полифилл.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Отправить
Поделиться
Запинить

Рекомендуем похожие советы