我有这个输入元素：
<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特性来实现这一点。
当前回答
如果只处理滚动到输入元素，则可以使用focus（）。例如，如果要滚动到第一个可见输入：
$(':input:visible').first().focus();
或容器中第一个可见的输入，类为.error：
$('.error :input:visible').first().focus();
感谢Tricia Ball指出这一点！
其他回答
史蒂夫和彼得的解决方案非常有效。
但在某些情况下，您可能必须将该值转换为整数。奇怪的是，$（“…”）.offset（）.top返回的值有时是浮点数。使用：parseInt（$（“…”）.offset（）.top）
例如：
$("#button").click(function() {
$('html, body').animate({
scrollTop: parseInt($("#elementtoScrollToID").offset().top)
}, 2000);
});
“动画”解决方案的精简版。
$.fn.scrollTo = function (speed) {
if (typeof(speed) === 'undefined')
speed = 1000;
$('html, body').animate({
scrollTop: parseInt($(this).offset().top)
}, speed);
};
基本用法：$（'#your_element'）.sollTo（）；
使用此简单脚本
if($(window.location.hash).length > 0){
$('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
}
如果在url中找到了哈希标记，则滚动到ID。如果没有找到哈希标记，那么忽略脚本。
单线的，单线的
subject.onclick = e=> window.scroll({ top: submit.offsetTop, behavior: 'smooth'});
subject.onclick=e=>window.sollow（｛top:submit.offsetTop，behavior：“smooth”｝）；.box，.foot｛display:flex；background:#fdf；padding:500px 0｝.foot{padding:250px｝<input type=“text”class=“textfield”value=“click here”id=“subject”name=“subject”><div class=“box”>一些内容<textarea></textarea></div><input type=“submit”class=“submit”id=“submit“name=”submit“value=”Ok，Done“><div class=“foot”>一些页脚</div>
jQuery（document）.ready（函数（$）{$（'a[href^=“#”]'）.bind（'click.s平滑滚动'，函数（e）{e.预防违约（）；var目标=this.hash，$target=$（目标）；$（'html，body'）.stop（）.animate（{“scrollTop”：$target.offset（）.top-40}，900，'摆动'，函数（）{window.location.hash=目标；} );} );} );<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><ul role=“tablist”><li class=“active”id=“p1”><a href=“#pane1”role=“tab”>第1节</a></li><li id=“p2”><a href=“#pane2”role=“tab”>第2节</a></li><li id=“p3”><a href=“#pane3”role=“tab”>第3节</a></li></ul><div id=“pane1”></div><div id=“pane2”></div><div id=“pane3”></div>
