百度输入框获取焦点时滚动到页面顶部的实现

最新推荐文章于 2021-06-25 22:21:55 发布

徐同保

最新推荐文章于 2021-06-25 22:21:55 发布

阅读量867

点赞数 1

分类专栏： web前端前端技术分享文章标签： scrollIntoView

本文链接：https://blog.csdn.net/xutongbao/article/details/81005346

版权

web前端同时被 2 个专栏收录

735 篇文章 14 订阅

订阅专栏

前端技术分享

251 篇文章 3 订阅

订阅专栏

<!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; width: 100%;height: 60px;line-height: 60px;border:1px solid #ddd;}
        .m-search-btn{position: absolute;top: 10px;right: 5px;padding: 0; width: 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>

徐同保

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
百度输入框获取焦点时滚动到页面顶部的实现

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;百度输入框获取焦点时滚动到页面顶部的实现&lt;/title&gt; &lt;meta name="viewport"
复制链接

扫一扫