点击按钮使用 jQuery 页面应滚动到页面的最后一个元素

我有这个元素：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功能来实现这一点。

分割线

网友回答：

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：定义滚动目标上方附加间距的数字。

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

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

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

分割线

网友回答：

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

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

我从文章中获得了代码 平滑滚动到没有 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>

分割线

网友回答：

如果您对平滑滚动效果不太感兴趣，而只是对滚动到特定元素感兴趣，则不需要为此使用一些jQuery函数。Javascript已经涵盖了你的案例：

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView

所以你需要做的就是：$("selector").get(0).scrollIntoView();

.get(0)之所以使用，是因为我们想检索 JavaScript 的 DOM 元素，而不是 JQuery 的 DOM 元素。

更新

现在可以使用动画滚动，传递滚动选项（请参阅 MDN）。您甚至可以控制块位置。它似乎有很大的支持，除了Safari

$("selector").get(0).scrollIntoView({behavior: 'smooth'});

模板简介：该模板名称为【点击按钮使用 jQuery 页面应滚动到页面的最后一个元素】，大小是暂无信息，文档格式为.编程语言，推荐使用Sublime/Dreamweaver/HBuilder打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【JavaScript】栏目查找您需要的精美模板。