我如何获得元素滚动到视图，使用jQuery？
我有一个使用<ul><li><img...格式图像的HTML文档。 浏览器窗口既有垂直滚动也有水平滚动。
问题：当我点击图像<img> ，怎样才能让整个文档滚动到我刚刚点击的图像的top:20px; left:20px top:20px; left:20px ？
我已经在这里浏览类似的post…虽然我是JavaScript的新手，并想了解如何实现自己。
既然你想知道它是如何工作的，我会一步步地解释它。
首先，你要绑定一个函数作为图像的点击处理程序：
$('#someImage').click(function () { // Code to do scrolling happens here });
这将把点击处理程序应用于id="someImage"的图像。 如果您想要对所有图像执行此操作，请将'#someImage'replace为'img' 。
现在对于实际的滚动代码：
-
获取图像偏移（相对于文档）：
var offset = $(this).offset(); // Contains .top and .left -
从
top和left减去20：offset.left -= 20; offset.top -= 20; -
现在为
<body>和<html>的scroll-top和scroll-left CSS属性设置animation：$('html, body').animate({ scrollTop: offset.top, scrollLeft: offset.left });
有一个名为scrollIntoView的DOM方法，它被所有的主stream浏览器支持，它将一个元素与视口的顶部/左边alignment（或者尽可能靠近）。
$("#myImage")[0].scrollIntoView();
在支持的浏览器上，您可以提供以下选项：
$("#myImage")[0].scrollIntoView({ behavior: "smooth", // or "auto" or "instant" block: "start" // or "end" });
或者，如果所有元素都有唯一的ID，则只需更改location对象的hash属性即可支持后退/前进button：
$(document).delegate("img", function (e) { if (e.target.id) window.location.hash = e.target.id; });
之后，只需调整scrollTop / scrollLeft属性-20：
document.body.scrollLeft -= 20; document.body.scrollTop -= 20;
有一些方法可以将元素直接滚动到视图中，但是如果要滚动到元素的相对点，则必须手动执行：
在点击处理程序中，获取元素相对于文档的位置，减去20并使用window.scrollTo ：
var pos = $(this).offset(); var top = pos.top - 20; var left = pos.left - 20; window.scrollTo((left < 0 ? 0 : left), (top < 0 ? 0 : top));
看看jQuery.scrollTo插件。 这是一个演示 。
这个插件有很多选项，超出了本地scrollIntoView提供给你的。 例如，您可以将滚动设置为平滑，然后为滚动完成时设置callback。
你也可以看看所有标记为“scroll”的JQuery插件 。
下面是一个快速的jQuery插件，可以很好地映射内置的浏览器function：
$.fn.ensureVisible = function () { $(this).each(function () { $(this)[0].scrollIntoView(); }); }; ... $('.my-elements').ensureVisible();
我见过的最简单的解决scheme
$('html, body').animate({ scrollTop: $("#target-element").offset().top }, 1000);
这里的教程
我的用户界面有一个垂直滚动的拇指内的拇指列表目标是使当前的拇指正确的拇指中心。 我从批准的答案开始，但发现有一些调整，以真正的中心当前拇指。 希望这可以帮助别人。
标记：
<ul id='thumbbar'> <li id='thumbbar-123'></li> <li id='thumbbar-124'></li> <li id='thumbbar-125'></li> </ul>
jQuery的：
// scroll the current thumb bar thumb into view heightbar = $('#thumbbar').height(); heightthumb = $('#thumbbar-' + pageid).height(); offsetbar = $('#thumbbar').scrollTop(); $('#thumbbar').animate({ scrollTop: offsetthumb.top - heightbar / 2 - offsetbar - 20 });
试验和错误后，我想出了这个function，也与iframe工作。
function bringElIntoView(el) { var elOffset = el.offset(); var $window = $(window); var windowScrollBottom = $window.scrollTop() + $window.height(); var scrollToPos = -1; if (elOffset.top < $window.scrollTop()) // element is hidden in the top scrollToPos = elOffset.top; else if (elOffset.top + el.height() > windowScrollBottom) // element is hidden in the bottom scrollToPos = $window.scrollTop() + (elOffset.top + el.height() - windowScrollBottom); if (scrollToPos !== -1) $('html, body').animate({ scrollTop: scrollToPos }); }
只是一个小费。 仅适用于Firefox
Element.scrollIntoView（）;
