获取事件时控制滚动条滚动到相应的位置

最新推荐文章于 2024-04-23 11:46:37 发布

原创最新推荐文章于 2024-04-23 11:46:37 发布 · 845 阅读

0 ·

CC 4.0 BY-SA版权

动画效果专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种利用jQuery库来实现网页中搜索输入框滚动定位的方法。通过点击输入框触发滚动事件，使页面平滑滚动到指定位置，提供更好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html:

<div style="height: 800px;"></div>
<input type="text" value="" class="search_input" />
<div style="height: 800px;"></div>

js：记得引入jq库

<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
        <script>
            $(function(){
            $('.search_input').click(function(){
                var scroll_offset = $(this).offset().top;
                $("body,html").animate({
                scrollTop: scroll_offset 
                }, 300);// 速度 毫秒
            })

        })
        </script>