Всем привет!
Столкнулся с проблемой: необходимо было реализовать, чтобы - при клике по определенной кнопке в мобильном разрешении экрана - происходил скролл до формы поиска и - после завершения скролла - фокусировка на нужный input. Вот ссылка на саму страницу -
клик
Обращаю внимание, что кнопка, по которой нужно кликнуть, появляется при скролле страницы вниз
skrinshoter.ru/s/120620/RAeoHQCT?a
skrinshoter.ru/s/120620/9jq9RWiO?a
Казалось бы, тривиальная задача - пара строк jquery и - готово! Оказалось, что на всёх браузерах этот код прекрасно отрабатывает, кроме safari (в данном случае тестили на айфонах).
Вот разметка
<!--кнопка для срабатывания скрипта-->
<div class="search_fix"></div>
...
<!--форма с полем input-->
<form action="rezultatyi-poiska.html" method="get" class="header__search msearch2">
<input id="change_search_input" type="text" class="header__input ui-autocomplete-input" name="query" value="" placeholder="Что ищем?" autocomplete="off">
<div class="input-group-append">
<button type="submit" class="header__btn"></button>
</div>
<div id="change_search"></div>
<div id="change_search_close"></div>
</form>
Вот jquery - упрощенный, выкинул не относящиеся к проблеме строки
var windowWidth = window.innerWidth;
if (windowWidth > 991) {
$('.header .search_fix').on ('click', function(){
$('#change_search_input').focus();
return false;
});
} else {
$('.search_fix').on('click', function(event){
console.log(event.type);
$("html, body").animate({ scrollTop: 0}, 1000, function() {
$('#change_search_input').focus();
});
});
}
Я не смог нагуглить решение проблемы, возможно, не хватает знаний.
Вдруг кто сталкивался - направьте пожалуйста, буду очень признателен.
