jQuery滚动到元素

JavaScript

西门卡卡西

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功能来实现此目的。

第197篇《jQuery滚动到元素》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
null 2020.03.09 
var scrollTo = function($parent, $element) {
    var topDiff = $element.position().top - $parent.position().top;

    $parent.animate({
        scrollTop : topDiff
    }, 100);
};
番长梅 2020.03.09

I know a way without jQuery:

document.getElementById("element-id").scrollIntoView();
Gil宝儿 2020.03.09

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

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

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android