使用scrollTop与特定的div一起使用

Question

20 浏览2023年5月21日

匿名的 2022年8月28日

0 Comments

我有一个输入元素:

然后有其他元素，如其他的标签和</code>标签等... 当用户点击<code><input id=\"#subject\"></code>时，页面应该滚动到页面最后的元素，并且应该使用一个漂亮的动画来实现(应该是向底部滚动而不是向顶部滚动)。 页面的最后一个项目是一个带有<code>#submit</code>的<code>提交</code>按钮： <pre><input type="submit" class="submit" id="submit" name="submit" value="Ok, Done."> </pre> 动画不应该太快，应该是流畅的。 我使用的是最新的jQuery版本。我更喜欢不安装任何插件，而是使用默认的jQuery功能来实现这个。

admin 更改状态以发布 2023年5月21日

0

2 答案

匿名的 · Answer 1 · 2022-08-28T20:57:58+00:00

jQuery .scrollTo(): 查看-演示,API,源码

我编写了这个轻量级插件，以使页面/元素滚动更加容易。它是灵活的，您可以传入一个目标元素或指定的值。也许这可能成为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: 一个数字，定义滚动目标上方的附加间距。

duration: 一个字符串或数字，确定动画的运行时间。

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

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

匿名的 · Answer 2 · 2022-08-28T20:57:58+00:00

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

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

我从文章Smoothly scroll to an element without a jQuery plugin中获取了代码。我已在下面的示例中进行了测试。