Mobile 移动设备文本输入焦点的滚动页面？

我正在制作一个移动优化网站，带有文本输入，可以在键入时过滤列表。与此类似：

---

对于手机而言，如果您选择输入时页面向下滚动，使输入位于页面顶部，这将是一个可用性优势。这样，当您键入时，以下列表中的大部分内容都将可见。这可能吗？或者有没有人有这样做的经验？谢谢

同意-这对可用性很好

如果您使用的是jQuery，这应该可以做到：

$('#id-of-text-input').on('focus', function() {
    document.body.scrollTop = $(this).offset().top;
});

---

更好的解决办法是：

$('#id-of-text-input').on('focus', function() {
   document.body.scrollTop += this.getBoundingClientRect().top - 10
});

因为

offsetTop

（或者

.offset（）.top

如果使用Jquery）返回与第一个定位父对象的距离，而您需要与

文档顶部的距离

getBoundingClientRect（）.top
返回当前视口位置到元素之间的距离，即如果在元素下方滚动300px，它将返回
-300
。因此，使用
+=
添加距离将滚动到元素<代码>-10

是可选的-以便在顶部留出一些空间。

谢谢！页面中间有滚动选项吗？document.body.scrollTop=$（this.offset（）+（window.innerHeight/2）；大概但是您希望确保屏幕上的键盘不会与输入重叠（并且您不知道疯狂键盘人X可能在设备Y上使用什么），因此top可能更安全。在Angular中也可以这样做吗？@Siyah Angular是一个框架而不是DOM库，所以通常您会使用jQuery来处理这类事情（或者仅仅是香草JS:）。这也可以在Angular中实现吗？你错过了）；在末尾添加了缺少的

）编辑文章并使用代码格式。还要考虑对代码添加任何解释。
$('input, textarea').focus(function () {
    $('html, body').animate({ scrollTop: ($('input, textarea').offset().top - 10) }, 1);
    return false;
});