我有这个输入元素：
<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特性来实现这一点。
当前回答
值得一提的是，这就是我如何为可以在DIV中滚动的通用元素实现这样的行为。在我们的例子中，我们不滚动整个页面，只滚动带有溢出的特定元素：auto；在更大的布局内。
它创建了一个目标元素高度的假输入，然后将焦点放在它上，无论你在可滚动的层次结构中有多深，浏览器都会关注其余部分。就像一个魅力。
var $scrollTo = $('#someId'),
inputElem = $('<input type="text"></input>');
$scrollTo.prepend(inputElem);
inputElem.css({
position: 'absolute',
width: '1px',
height: $scrollTo.height()
});
inputElem.focus();
inputElem.remove();
其他回答
在找到了让我的代码工作的方法之后，我想我应该把事情弄清楚一点：用于：
$('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");
非常简单且易于使用的自定义jQuery插件。只需将属性scroll=添加到可单击元素中，并将其值设置为要滚动到的选择器。
像这样：<a scroll=“#product”>单击我</a>。它可以用于任何元素。
(function($){
$.fn.animateScroll = function(){
console.log($('[scroll]'));
$('[scroll]').click(function(){
selector = $($(this).attr('scroll'));
console.log(selector);
console.log(selector.offset().top);
$('html body').animate(
{scrollTop: (selector.offset().top)}, //- $(window).scrollTop()
1000
);
});
}
})(jQuery);
// RUN
jQuery(document).ready(function($) {
$().animateScroll();
});
// IN HTML EXAMPLE
// RUN ONCLICK ON OBJECT WITH ATTRIBUTE SCROLL=".SELECTOR"
// <a scroll="#product">Click To Scroll</a>
实现页面滚动到目标div id的简单方法
var targetOffset = $('#divID').offset().top;
$('html, body').animate({scrollTop: targetOffset}, 1000);
在大多数情况下，最好使用插件。认真地我要在这里兜售我的。当然还有其他的。但请检查他们是否真的避免了那些你首先想要插件的陷阱——并不是所有人都这样做。
我写过在其他地方使用插件的原因。简而言之，这里大多数答案的基础是一行
$('html, body').animate( { scrollTop: $target.offset().top }, duration );
是糟糕的用户体验。
动画不会响应用户操作。即使用户单击、轻击或尝试滚动，它也会继续。如果动画的起点接近目标元素，则动画会非常缓慢。如果目标元素位于页面底部附近，则无法滚动到窗口顶部。然后，滚动动画在中间运动时突然停止。
为了处理这些问题（以及其他一些问题），您可以使用我的插件jQuery.scrollable
$( window ).scrollTo( targetPosition );
就这样。当然，还有更多的选择。
关于目标位置，在大多数情况下，$target.offset（）.top完成任务。但是请注意，返回的值没有考虑html元素上的边框（请参见本演示）。如果你需要目标位置在任何情况下都准确，最好使用
targetPosition = $( window ).scrollTop() + $target[0].getBoundingClientRect().top;
即使在html元素上设置了边框，这也能正常工作。
单线的，单线的
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>
