Школа
Веб-разработка

У меня есть форма, находящаяся где‑то на странице и плавающая кнопка. При клике на кнопку нужно плавно прокрутить страницу к форме. Как это лучше всего сделать?

Фёдор Семёнов
14 фев 2019
👁 17832   🗩2
Веб-разработка

У меня есть форма, находящаяся где‑то на странице и плавающая кнопка. При клике на кнопку нужно плавно прокрутить страницу к форме. Как это лучше всего сделать?

Фёдор Семёнов
14 фев 2019
👁 17832   🗩2
Руст Кулматов
Фронтенд‑разработчик, преподаватель, соавтор движка электронных книг бюро
Полезно
 11
11
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

Лучше всего с этим справится 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Полезно
 11
11
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Если лень js, можно просто поставить ссылку.

В css на body — scroll‑behavior: smooth.

Для Хрома понадобится повесить scroll‑behavior на html, а не на body.

Для Эджа и Сафари понадобится полифилл:
https://github.com/iamdustan/smoothscroll

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы