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

Question

[Мухаммад Магомедов]

Добрый день.

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

Но когда добавляют такой код

$mobileFooterInput.focus(); //строка этого кода закомментирована в js

(устанавливает у input фокус), то перебрасывание происходит резко.

Подскажите пожалуйста, как сделать перебрасывание на input плавным?

Answer 1

[RAX7]

Answer 2

[monochromer]

<a href="#subscribe">enter your email</a>
<input id="subscribe" type="text">

html {
  scroll-behavior: smooth;
}

Answer 3

[Надим]

Если вам нужна плавная прокрутка до элемента используйте функцию 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 не конфликтовали с теми скобками, что используются внутри атрибута.

Comments

[Мухаммад Магомедов]

но мне нужно чтобы при прокрутке input принимал состояние focus. Как это можно реализовать с плавной прокруткой?

[Надим]

Мухаммад Магомедов, в чем проблема? Если нужен фокус после прокрутки, то ставьте его:

document.querySelector('#mobile-search').scrollIntoView({behavior: 'smooth'}); document.querySelector('#mobile-search').focus();

Применительно к кнопке:

<a onclick="document.querySelector('#mobile-search').scrollIntoView({behavior: 'smooth'}); document.querySelector('#mobile-search').focus();" href="#mobile-search">Прокрутить</a>

[Мухаммад Магомедов]

Надим Закиров, теперь вставьте свой код в
После document.querySelector('#mobile-search').focus(); скролл происходит не плавный, а резкий.

[Надим]

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

Для задержек в JavaScript используется функция setTimeout() ниже пример с задержкой в 1 секунду:
https://jsfiddle.net/m435ju7f/1/