使用 jQuery 滚动到元素

javascript jquery scroll

2022-08-29 21:50:22

我有这个元素：input

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

然后我有一些其他元素，比如其他标签和标签，等等......<textarea>

当用户单击时，页面应滚动到页面的最后一个元素，并且应该使用漂亮的动画（它应该滚动到底部而不是顶部）来执行此操作。<input id="#subject">

页面的最后一项是一个按钮，其中包含：submit#submit

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

动画不应太快，并且应该是流畅的。

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

答案 1

假设您有一个 id 为的按钮，请尝试以下示例：button

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

我从文章Smoothly scroll到一个没有jQuery插件的元素中获得了代码。我已经在下面的例子中测试了它。

<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>

答案 2

jQuery .scrollTo（）： View - Demo， API， Source

我编写了这个轻量级插件，使页面/元素滚动更容易。它可以灵活地传递目标元素或指定值。也许这可能是jQuery下一个官方版本的一部分，你怎么看？

用法示例：

$('body').scrollTo('#target'); // Scroll screen to target element

$('body').scrollTo(500); // Scroll screen 500 pixels down

$('#scrollable').scrollTo(100); // Scroll individual element 100 pixels down

选项：

scrollTarget：指示所需滚动位置的元素、字符串或数字。

offsetTop：一个数字，用于定义滚动目标上方的额外间距。

持续时间：确定动画将运行多长时间的字符串或数字。

easing：一个字符串，指示用于过渡的 easing 函数。

complete：动画完成后要调用的函数。