x
 
Фёдор Семёнов
14 февраля 2019
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

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


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

Поделиться
Отправить

Комментарии

Дмитрий Каторжнов
14 февраля 2019

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

Кнопка

Форма


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


14 февраля 2019

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

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


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

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Как готовить макеты для технологов? 2 Как отслеживать и обрабатывать чит-коды 3 Существует ли способ проверить компетентность веб-разработчика, если сам ничего не понимаешь в этом? ЦСС-переменные: как использовать и для чего могут пригодиться 2




Недавно всплыло

Как найти себе замену 1 2 2 Хочу научиться сторителлингу 2