我有这个 input 元件：
<input type="text" class="textfield" value="" id="subject" name="subject">
然后我有一些其他元素，如其他文本输入，textareas等。
当用户点击它时 input 同 #subject，页面应滚动到页面的最后一个元素，并带有漂亮的动画。它应该是一个滚动到底部而不是顶部。
该页面的最后一项是 submit 按钮 #submit：
<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">
动画不应该太快，应该是流畅的。
我正在运行最新的jQuery版本。我更喜欢不安装任何插件，而是使用默认的jQuery功能来实现这一点。
假设你有一个带id的按钮 button，试试这个例子：
$("#button").click(function() {
$([document.documentElement, document.body]).animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
});
我从文章中得到了代码 无需jQuery插件即可平滑滚动到元素。我在下面的例子中对它进行了测试。
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(document).ready(function (){
$("#click").click(function (){
$('html, body').animate({
scrollTop: $("#div1").offset().top
}, 2000);
});
});
</script>
<div id="div1" style="height: 1000px; width 100px">
Test
</div>
<br/>
<div id="div2" style="height: 1000px; width 100px">
Test 2
</div>
<button id="click">Click me</button>
</html>假设你有一个带id的按钮 button，试试这个例子：
$("#button").click(function() {
$([document.documentElement, document.body]).animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
});
我从文章中得到了代码 无需jQuery插件即可平滑滚动到元素。我在下面的例子中对它进行了测试。
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(document).ready(function (){
$("#click").click(function (){
$('html, body').animate({
scrollTop: $("#div1").offset().top
}, 2000);
});
});
</script>
<div id="div1" style="height: 1000px; width 100px">
Test
</div>
<br/>
<div id="div2" style="height: 1000px; width 100px">
Test 2
</div>
<button id="click">Click me</button>
</html> 
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：一个数字，用于定义滚动目标上方的其他间距。
持续时间：确定动画运行时间的字符串或数字。
缓解：一个字符串，指示要用于转换的缓动函数。
完成：动画完成后调用的函数。
如果你对平滑滚动效果不太感兴趣并且只想滚动到特定元素，那么你不需要一些jQuery函数。 Javascript已涵盖您的案例：
https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView
所以你需要做的就是： $("selector").get(0).scrollIntoView();
.get(0) 之所以使用是因为我们想要检索JavaScript的DOM元素而不是JQuery的DOM元素。
jQuery(document).ready(function($) {
$('a[href^="#"]').bind('click.smoothscroll',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate( {
'scrollTop': $target.offset().top-40
}, 900, 'swing', function () {
window.location.hash = target;
} );
} );
} );<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">Section 1</a></li>
<li id="p2"><a href="#pane2" role="tab">Section 2</a></li>
<li id="p3"><a href="#pane3" role="tab">Section 3</a></li>
</ul>
<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>使用这个简单的脚本
if($(window.location.hash).length > 0){
$('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
}
如果在url中找到了一个hash标签，那么scrollTo会动画到ID。如果未找到哈希标记，则忽略该脚本。
史蒂夫和彼得的解决方案非常有效。
但在某些情况下，您可能必须将值转换为整数。奇怪的是，返回的值来自 $("...").offset().top 有时在 float。
使用： 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').scrollTo();