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

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

Добрый день.

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

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

Подскажите пожалуйста, как сделать перебрасывание на input плавным?
  • Вопрос задан
  • 60 просмотров
Решения вопроса 1
RAX7
@RAX7
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
monochromer
@monochromer
DIVeloper
<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 не конфликтовали с теми скобками, что используются внутри атрибута.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы