Web_Mukhammad
@Web_Mukhammad
frontend-разработчик

Как решить проблему с focus()?

Добрый день.

Есть скрипт, который при нажатии на тег<a href="#mobile-search">Click</a>, плавно перебрасывает на input, у которого id совпадает с href=".".

Но когда добавляют такой код
$mobileFooterInput.focus(); //строка этого кода закомментирована в js
(устанавливает у input фокус), то перебрасывание происходит резко.

Подскажите пожалуйста, как сделать перебрасывание на input плавным?
  • Вопрос задан
  • 45 просмотров
Пригласить эксперта
Ответы на вопрос 2
monochromer
@monochromer
<a href="#subscribe">enter your email</a>
<input id="subscribe" type="text">

html {
  scroll-behavior: smooth;
}

Ответ написан
@zkrvndm
Боты, парсеры, расширения
Если вам нужна плавная прокрутка до элемента используйте функцию scrollIntoView(), пример использования ниже:
document.querySelector('#mobile-search').scrollIntoView({behavior: 'smooth'});

Вместо #mobile-search можете прописать и использовать абсолютно любой CSS-селектор - например можете вписать селектор input[name="email"] и прокрутка все равно будет работать, так как она осуществляется через JavaScript.

Код для прокрутки можно привязать к нужной вам кнопке следующим образом:
<a onclick="document.querySelector('#mobile-search').scrollIntoView({behavior: 'smooth'});" href="#mobile-search">Прокрутить</a>

Атрибут onclick запускает код внутри себя, при клике на сам элемент. Соответственно, можете вместо ссылок, спокойно использовать любые другие элементы в качестве кнопок, допустим li или button.

Обратите внимание, что я использовал везде одинарные скобки, это необходимо для того, чтобы скобки у атрибута onclick не конфликтовали с теми скобками, что используются внутри атрибута.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Sportrecs Москва
от 150 000 до 200 000 ₽