我有这个输入元素：
<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特性来实现这一点。
当前回答
使用此简单脚本
if($(window.location.hash).length > 0){
$('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
}
如果在url中找到了哈希标记，则滚动到ID。如果没有找到哈希标记，那么忽略脚本。
其他回答
jQuery.sollTo（）：视图-演示，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：定义滚动目标上方额外间距的数字。
duration：一个字符串或数字，决定动画将运行多长时间。
easing：一个字符串，指示用于转换的缓和函数。
complete：动画完成后调用的函数。
在找到了让我的代码工作的方法之后，我想我应该把事情弄清楚一点：用于：
$('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");
使用此解决方案，您不需要任何插件，并且除了在关闭</body>标记之前放置脚本外，不需要进行任何设置。
$("a[href^='#']").on("click", function(e) {
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top
}, 1000);
return false;
});
if ($(window.location.hash).length > 1) {
$("html, body").animate({
scrollTop: $(window.location.hash).offset().top
}, 1000);
}
加载时，如果地址中有哈希，我们会滚动到它。
而且，每当您单击带有href哈希的链接（例如#top）时，我们都会滚动到它。
##编辑2020
如果你想要一个纯JavaScript的解决方案：你可以使用类似的方法：
var _scrollToElement = function (selector) {
try {
document.querySelector(selector).scrollIntoView({ behavior: 'smooth' });
} catch (e) {
console.warn(e);
}
}
var _scrollToHashesInHrefs = function () {
document.querySelectorAll("a[href^='#']").forEach(function (el) {
el.addEventListener('click', function (e) {
_scrollToElement(el.getAttribute('href'));
return false;
})
})
if (window.location.hash) {
_scrollToElement(window.location.hash);
}
}
_scrollToHashesInHrefs();
要显示整个元素（如果可以使用当前窗口大小）：
var element = $("#some_element");
var elementHeight = element.height();
var windowHeight = $(window).height();
var offset = Math.min(elementHeight, windowHeight) + element.offset().top;
$('html, body').animate({ scrollTop: offset }, 500);
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>
