我有这个输入元素：
<input type="text" class="textfield" value="" id="subject" name="subject">
然后我还有一些其他元素，比如其他标签的&<textarea>标签等等。。。
当用户点击＜input id=“#subject”＞时，页面应该滚动到页面的最后一个元素，并且应该使用一个漂亮的动画（应该滚动到底部而不是顶部）。
页面的最后一项是带有#submit的提交按钮：
<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">
动画不应该太快，应该是流畅的。
我正在运行最新的jQuery版本。我宁愿不安装任何插件，而是使用默认的jQuery特性来实现这一点。
当前回答
在找到了让我的代码工作的方法之后，我想我应该把事情弄清楚一点：用于：
$('html, body').animate({
scrollTop: $("#div1").offset().top
}, 2000);
您需要在页面顶部，因为$（“#div1”）.offset（）.top将为您滚动到的不同位置返回不同的数字。如果您已经滚动到顶部，则需要指定确切的pageY值（请参阅此处的pageY定义：https://javascript.info/coordinates).
现在，问题是计算一个元素的pageY值。下面是滚动容器为主体的示例：
function getPageY(id) {
let elem = document.getElementById(id);
let box = elem.getBoundingClientRect();
var body = document.getElementsByTagName("BODY")[0];
return box.top + body.scrollTop; // for window scroll: box.top + window.scrollY;
}
即使您滚动到某个位置，上面的函数也会返回相同的数字。现在，要滚动回该元素：
$("html, body").animate({ scrollTop: getPageY('div1') }, "slow");
其他回答
史蒂夫和彼得的解决方案非常有效。
但在某些情况下，您可能必须将该值转换为整数。奇怪的是，$（“…”）.offset（）.top返回的值有时是浮点数。使用：parseInt（$（“…”）.offset（）.top）
例如：
$("#button").click(function() {
$('html, body').animate({
scrollTop: parseInt($("#elementtoScrollToID").offset().top)
}, 2000);
});
$（'html，body'）.animate（…）在iPhone、Android、Chrome或Safari浏览器中不适用。
我必须以页面的根内容元素为目标。
$（'#cotent'）.animate（…）
以下是我的结论：
if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
$('#content').animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 'slow');
}
else{
$('html, body').animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 'slow');
}
所有正文内容都与#contentdiv连接
<html>
....
<body>
<div id="content">
...
</div>
</body>
</html>
我就是这样做的。
document.querySelector('scrollHere').scrollIntoView({ behavior: 'smooth' })
适用于任何浏览器。
它可以很容易地包装成函数
function scrollTo(selector) {
document.querySelector(selector).scrollIntoView({ behavior: 'smooth' })
}
下面是一个工作示例$（“.btn”）.click（函数）{document.getElementById（“scrollHere”）.sollIntoView（｛behavious:“smooth”｝）}).btn｛margin-bottom:500px；｝.middle｛显示：块；边距底部：500px；颜色：红色；｝<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script><button class=“btn”>向下滚动</button><h1 class=“middle”>看到了吗</h1><div id=“scrollHere”>到达目的地</div>
Docs
如果您对平滑滚动效果不太感兴趣，而只是对滚动到特定元素感兴趣，则不需要使用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'});
“动画”解决方案的精简版。
$.fn.scrollTo = function (speed) {
if (typeof(speed) === 'undefined')
speed = 1000;
$('html, body').animate({
scrollTop: parseInt($(this).offset().top)
}, speed);
};
基本用法：$（'#your_element'）.sollTo（）；
