javascript - 如何使用 jQuery 让元素滚动到 View 中？

Question

我有一个 HTML 文档，其中包含使用 <ul><li><img... 的网格格式的图像.浏览器窗口具有垂直和水平滚动。

问题:当我点击图片时 <img> ，那么我如何让整个文档滚动到我刚刚单击的图像为top:20px; left:20px的位置?

我在这里浏览过类似的帖子...虽然我对 JavaScript 很陌生，但我想了解自己是如何实现这一点的。

Answer 1

有一个名为 scrollIntoView 的 DOM 方法，所有主流浏览器都支持，它将元素与视口(viewport)的顶部/左侧对齐(或尽可能靠近)。

$("#myImage")[0].scrollIntoView();

在支持的浏览器上，您可以提供选项:

$("#myImage")[0].scrollIntoView({
    behavior: "smooth", // or "auto" or "instant"
    block: "start" // or "end"
});

或者，如果所有元素都有唯一的 ID，您可以只更改 location 的 hash 属性后退/前进按钮支持的对象:

$(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;