问题

我有这个输入元素:

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

然后我有一些其他的元素,像其他文本输入,textareas等.

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

网页的最后一个项目是提交按钮,其中包含 #submit :

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

动画不应太快,应该很流畅.

我运行的是最新的jQuery版本.我喜欢不安装任何插件,但使用默认的jQuery功能来实现这一点.



解决方法

假设您有一个具有按钮的按钮,请尝试此示例:

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

我从文章中获得了代码 平滑地滚动到没有jQuery插件的元素 .我已经在下面的例子中测试了它.

<html>
    <script src="http://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>




相关问题推荐