专注于粘性条强制页面中的输入以滚动到顶部

Question

我遇到以下情况：响应式站点，置顶 header 和置顶 header.

中的搜索输入

当我滚动页面并单击搜索输入时，问题出现在 phone 和平板电脑上，它聚焦在输入字段并显示 phone 键盘并将页面滚动到输入的位置字段在 DOM（在我的 html 代码的开头）

如何防止滚动到顶部，并将焦点放在我的搜索栏上？我不确定我是否解释清楚了。这就是为什么我附上有问题的视频 - https://youtu.be/7UOiDmEvp4U

Answer 1

我认为你必须设置 e.preventDefault();。也许下面的代码对你有帮助。

$(function() {
  $('nav').on('click', '.search', function(e) {
    e.preventDefault();
    var $el = $(e.currentTarget);
    
    $el.find('input').addClass('large').focus();
  });
})

body {
  height: 600px;
}
nav {
  position: fixed;
  top: 0;
  left:0;
  background: #333;
  color: #fff;
  width: 100%;
  padding: 20px;
}
.search .fa {
  cursor: pointer;
 }
.search input {
  width: 50px;
  transition: all 0.3s;
}
.search input.large {
  width: 200px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav>
  <div class="search"><i class="fa fa-search"></i>
    <input>
  </div>
</nav>

Answer 2

原来在iOS8+

位置固定有bug

这是我用来解决问题的方法：https://gist.github.com/AlexanderOMara/8747f59b6450878e78c7

专注于粘性条强制页面中的输入以滚动到顶部

focus on input in sticky bar force page to scroll to top

html

css

mobile

focus

responsive