Javascript 选择输入字段时，将父DIV滑动到顶部

当有人在我的网站上（特别是在移动设备上）单击特定的输入字段时，我需要输入字段的父div滑到页面顶部。我之所以需要这个，是因为弹出的键盘覆盖了输入字段下面的整个div，它向用户显示他们正在筛选的项目。我已经用图表说明了下面的问题。我希望在这里得到一些指导：）

起始状态：

完成状态：

---

像这样的事情应该做：

$('input').focus(function (event) {

  var offset = $('header').height();

  $('body, html').animate({
    scrollTop : offset
  })

})

---

您可以尝试使用

单击（）

触发它，然后使用

动画（）

平滑地设置父元素位置的动画。你也可以发布一个基本设置的小提琴吗？给你写一个正确的答案会更容易。向代码展示你迄今为止所做的尝试？答案取决于页面的标记方式。