我有这个输入元素：
<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特性来实现这一点。
假设您有一个带有id按钮的按钮，请尝试以下示例：
$("#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><脚本>$（文档）.ready（函数（）{$（“#click”）.click（函数（）{$（'html，body'）.animate({scrollTop:$（“#div1”）.offset（）.top}, 2000);});});</script><div id=“div1”style=“height:1000px；width 100px”>测验</div><br/><div id=“div2”style=“height:1000px；width 100px”>测试2</div><button id=“click”>单击我</button></html>
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：动画完成后调用的函数。
使用此简单脚本
if($(window.location.hash).length > 0){
$('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
}
如果在url中找到了哈希标记，则滚动到ID。如果没有找到哈希标记，那么忽略脚本。
如果您对平滑滚动效果不太感兴趣，而只是对滚动到特定元素感兴趣，则不需要使用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'});
史蒂夫和彼得的解决方案非常有效。
但在某些情况下，您可能必须将该值转换为整数。奇怪的是，$（“…”）.offset（）.top返回的值有时是浮点数。使用：parseInt（$（“…”）.offset（）.top）
例如：
$("#button").click(function() {
$('html, body').animate({
scrollTop: parseInt($("#elementtoScrollToID").offset().top)
}, 2000);
});
$('html, body').animate({scrollTop:
Math.min(
$(to).offset().top-margintop, //margintop is the margin above the target
$('body')[0].scrollHeight-$('body').height()) //if the target is at the bottom
}, 2000);
要显示整个元素（如果可以使用当前窗口大小）：
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>
“动画”解决方案的精简版。
$.fn.scrollTo = function (speed) {
if (typeof(speed) === 'undefined')
speed = 1000;
$('html, body').animate({
scrollTop: parseInt($(this).offset().top)
}, speed);
};
基本用法：$（'#your_element'）.sollTo（）；
如果只处理滚动到输入元素，则可以使用focus（）。例如，如果要滚动到第一个可见输入：
$(':input:visible').first().focus();
或容器中第一个可见的输入，类为.error：
$('.error :input:visible').first().focus();
感谢Tricia Ball指出这一点！
这是我使用通用类选择器抽象ID和href的方法
$（函数）{//可在任何地方使用的通用选择器$（“.js滚动到”）.click（函数（e）{//动态获取hrefvar destination=$（this）.attr（'href'）；//阻止href=“#”链接更改URL哈希（可选）e.预防违约（）；//动画滚动到目的地$（'html，body'）.animate({scrollTop:$（destination）.offset（）.top}, 500);});});<!-- 固定导航菜单示例--><ul class=“nav”><li><a href=“#section-1”class=“nav item js scroll to”>项目1</a></li><li><a href=“#section-2”class=“nav item js scroll to”>项目2</a></li><li><a href=“#section-3”class=“nav item js scroll to”>项目3</a></li></ul>
var scrollTo = function($parent, $element) {
var topDiff = $element.position().top - $parent.position().top;
$parent.animate({
scrollTop : topDiff
}, 100);
};
在大多数情况下，最好使用插件。认真地我要在这里兜售我的。当然还有其他的。但请检查他们是否真的避免了那些你首先想要插件的陷阱——并不是所有人都这样做。
我写过在其他地方使用插件的原因。简而言之，这里大多数答案的基础是一行
$('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元素上设置了边框，这也能正常工作。
我编写了一个通用函数，可以滚动到jQuery对象、CSS选择器或数值。
示例用法：
// scroll to "#target-element":
$.scrollTo("#target-element");
// scroll to 80 pixels above first element with class ".invalid":
$.scrollTo(".invalid", -80);
// scroll a container with id "#my-container" to 300 pixels from its top:
$.scrollTo(300, 0, "slow", "#my-container");
函数的代码：
/**
* Scrolls the container to the target position minus the offset
*
* @param target - the destination to scroll to, can be a jQuery object
* jQuery selector, or numeric position
* @param offset - the offset in pixels from the target position, e.g.
* pass -80 to scroll to 80 pixels above the target
* @param speed - the scroll speed in milliseconds, or one of the
* strings "fast" or "slow". default: 500
* @param container - a jQuery object or selector for the container to
* be scrolled. default: "html, body"
*/
jQuery.scrollTo = function (target, offset, speed, container) {
if (isNaN(target)) {
if (!(target instanceof jQuery))
target = $(target);
target = parseInt(target.offset().top);
}
container = container || "html, body";
if (!(container instanceof jQuery))
container = $(container);
speed = speed || 500;
offset = offset || 0;
container.animate({
scrollTop: target + offset
}, speed);
};
当用户点击带有#subject的输入时，页面应该滚动到页面的最后一个元素并添加一个漂亮的动画。它应该是向下滚动而不是向上滚动。页面的最后一项是带有#submit的提交按钮
$('#subject').click(function()
{
$('#submit').focus();
$('#subject').focus();
});
这将首先向下滚动到#submit，然后将光标恢复到单击的输入，这模拟向下滚动，适用于大多数浏览器。它也不需要jQuery，因为它可以用纯JavaScript编写。
通过链接焦点调用，这种使用焦点函数的方式可以更好地模拟动画吗。我还没有测试过这个理论，但它看起来像这样：
<style>
#F > *
{
width: 100%;
}
</style>
<form id="F" >
<div id="child_1"> .. </div>
<div id="child_2"> .. </div>
..
<div id="child_K"> .. </div>
</form>
<script>
$('#child_N').click(function()
{
$('#child_N').focus();
$('#child_N+1').focus();
..
$('#child_K').focus();
$('#child_N').focus();
});
</script>
非常简单且易于使用的自定义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中滚动的通用元素实现这样的行为。在我们的例子中，我们不滚动整个页面，只滚动带有溢出的特定元素：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();
使用此解决方案，您不需要任何插件，并且除了在关闭</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();
我设置了一个模块滚动元素npm安装滚动元素。它的工作原理如下：
import { scrollToElement, scrollWindowToElement } from 'scroll-element'
/* scroll the window to your target element, duration and offset optional */
let targetElement = document.getElementById('my-item')
scrollWindowToElement(targetElement)
/* scroll the overflow container element to your target element, duration and offset optional */
let containerElement = document.getElementById('my-container')
let targetElement = document.getElementById('my-item')
scrollToElement(containerElement, targetElement)
在以下SO帖子的帮助下编写：
没有jquery的元素的顶部偏移量不带jquery的滚动条动画
代码如下：
export const scrollToElement = function(containerElement, targetElement, duration, offset) {
if (duration == null) { duration = 1000 }
if (offset == null) { offset = 0 }
let targetOffsetTop = getElementOffset(targetElement).top
let containerOffsetTop = getElementOffset(containerElement).top
let scrollTarget = targetOffsetTop + ( containerElement.scrollTop - containerOffsetTop)
scrollTarget += offset
scroll(containerElement, scrollTarget, duration)
}
export const scrollWindowToElement = function(targetElement, duration, offset) {
if (duration == null) { duration = 1000 }
if (offset == null) { offset = 0 }
let scrollTarget = getElementOffset(targetElement).top
scrollTarget += offset
scrollWindow(scrollTarget, duration)
}
function scroll(containerElement, scrollTarget, duration) {
let scrollStep = scrollTarget / (duration / 15)
let interval = setInterval(() => {
if ( containerElement.scrollTop < scrollTarget ) {
containerElement.scrollTop += scrollStep
} else {
clearInterval(interval)
}
},15)
}
function scrollWindow(scrollTarget, duration) {
let scrollStep = scrollTarget / (duration / 15)
let interval = setInterval(() => {
if ( window.scrollY < scrollTarget ) {
window.scrollBy( 0, scrollStep )
} else {
clearInterval(interval)
}
},15)
}
function getElementOffset(element) {
let de = document.documentElement
let box = element.getBoundingClientRect()
let top = box.top + window.pageYOffset - de.clientTop
let left = box.left + window.pageXOffset - de.clientLeft
return { top: top, left: left }
}
$（'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>
动画：
// slide to top of the page
$('.up').click(function () {
$("html, body").animate({
scrollTop: 0
}, 600);
return false;
});
// slide page to anchor
$('.menutop b').click(function(){
//event.preventDefault();
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 600);
return false;
});
// Scroll to class, div
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#target-element").offset().top
}, 1000);
});
// div background animate
$(window).scroll(function () {
var x = $(this).scrollTop();
// freezze div background
$('.banner0').css('background-position', '0px ' + x +'px');
// from left to right
$('.banner0').css('background-position', x+'px ' +'0px');
// from right to left
$('.banner0').css('background-position', -x+'px ' +'0px');
// from bottom to top
$('#skills').css('background-position', '0px ' + -x + 'px');
// move background from top to bottom
$('.skills1').css('background-position', '0% ' + parseInt(-x / 1) + 'px' + ', 0% ' + parseInt(-x / 1) + 'px, center top');
// Show hide mtop menu
if ( x > 100 ) {
$( ".menu" ).addClass( 'menushow' );
$( ".menu" ).fadeIn("slow");
$( ".menu" ).animate({opacity: 0.75}, 500);
} else {
$( ".menu" ).removeClass( 'menushow' );
$( ".menu" ).animate({opacity: 1}, 500);
}
});
// progres bar animation simple
$('.bar1').each(function(i) {
var width = $(this).data('width');
$(this).animate({'width' : width + '%' }, 900, function(){
// Animation complete
});
});
如果您想在溢出容器中滚动（而不是上面回答的$（'html，body'）），同时使用绝对定位，这是一种方法：
var elem = $('#myElement'),
container = $('#myScrollableContainer'),
pos = elem.position().top + container.scrollTop() - container.position().top;
container.animate({
scrollTop: pos
}
实现页面滚动到目标div id的简单方法
var targetOffset = $('#divID').offset().top;
$('html, body').animate({scrollTop: targetOffset}, 1000);
这是Atharva的回答：https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView.只是想补充一下，如果您的文档在iframe中，您可以在父框架中选择一个元素滚动到视图中：
$('#element-in-parent-frame', window.parent.document).get(0).scrollIntoView();
这对我有用：
var targetOffset = $('#elementToScrollTo').offset().top;
$('#DivParent').animate({scrollTop: targetOffset}, 2500);
截至2019年的更新答案：
$('body').animate({
scrollTop: $('#subject').offset().top - $('body').offset().top + $('body').scrollTop()
}, 'fast');
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>
我就是这样做的。
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
单线的，单线的
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>
在找到了让我的代码工作的方法之后，我想我应该把事情弄清楚一点：用于：
$('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");
