jQuery滚动到元素

西门卡卡西2020-03-09

我有这个input元素：

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

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

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

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

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

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

我正在运行最新的jQuery版本。我更喜欢不安装任何插件，而是使用默认的jQuery功能来实现此目的。

2020/03/09 18:09:10

var scrollTo = function($parent, $element) {
    var topDiff = $element.position().top - $parent.position().top;

    $parent.animate({
        scrollTop : topDiff
    }, 100);
};

番长梅2020/03/09 18:09:10

I know a way without jQuery:

document.getElementById("element-id").scrollIntoView();

Gil宝儿2020/03/09 18:09:10

如果您对平滑滚动效果不太感兴趣，而仅对滚动到特定元素感兴趣，则不需要为此使用某些jQuery函数。Javascript已解决您的问题：

https://developer.mozilla.org/zh-CN/docs/Web/API/element.scrollIntoView

因此，您需要做的就是： $("selector").get(0).scrollIntoView();

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

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer