Javascript 使用 jQuery 滚动到一个元素

发布于01月01日

我有input个元素:

<input type="text" class="textfield" value="" id="subject" name="subject">

然后我还有一些其他元素，比如其他文本输入、文本区域等.

当用户用#subject点击input时，页面应该滚动到页面的最后一个元素，并带有一个漂亮的动画.它应该是一个滚动到底部，而不是顶部.

页面的最后一项是带有#submit的submit按钮:

<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">

动画不应该太快，应该是流畅的.

我正在运行最新的jQuery版本.我宁愿不安装任何插件，而是使用默认的jQuery功能来实现这一点.

推荐答案

假设您有一个id为button的按钮，请try 以下示例:

$("#button").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

我从第100条得到了密码.我已经在下面的例子中进行了测试.

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function (){
            $("#click").click(function (){
                $('html, body').animate({
                    scrollTop: $("#div1").offset().top
                }, 2000);
            });
        });
    </script>
    <div id="div1" style="height: 1000px; width 100px">
        Test
    </div>
    <br/>
    <div id="div2" style="height: 1000px; width 100px">
        Test 2
    </div>
    <button id="click">Click me</button>
</html>