<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度输入框 获取焦点时 滚动到页面顶部的实现</title>
<meta name="viewport" content="width=width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style type="text/css">
body{margin: 0;}
.m-test{height: 200px;background: #666;}
.m-search{position: relative;}
.m-input-wapper{padding: 10px 170px 10px 0;}
.m-input{margin: 0 0 0 2px; padding: 0 0 0 10px; 100%;height: 60px;line-height: 60px;border:1px solid #ddd;}
.m-search-btn{position: absolute;top: 10px;right: 5px;padding: 0; 146px;line-height: 60px;font-size: 20px; border:1px solid green;}
.m-test2{height: 1000px;background: #ddd;}
</style>
</head>
<body>
<div class="m-test"></div>
<div class="m-search">
<div class="m-input-wapper" id="m-input-wapper">
<input type="text" class="m-input" id="m-input">
<input type="button" class="m-search-btn" value="百度一下">
</div>
</div>
<div class="m-test2"></div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript">
$('#m-input').on('focusin', function () {
$("#m-input-wapper")[0].scrollIntoView(true);
});
</script>
</body>
</html>
