如何使用jQuery让元素滚动到视图中？

javascript jquery

2022-08-30 01:28:03

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

问题：当我点击一个图像，然后我如何让整个文档滚动到我刚刚点击的图像所在的位置？<img>top:20px; left:20px

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

答案 1

有一个名为rollackIntoView的DOM方法，它受所有主流浏览器的支持，它将元素与视区的顶部/左侧对齐（或尽可能接近）。

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

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

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

或者，如果所有元素都具有唯一的 ID，则只需更改位置对象的属性即可获得后退/前进按钮支持：hash

$(document).delegate("img", function (e) {
    if (e.target.id)
        window.location.hash = e.target.id;
});

之后，只需将 / 属性调整 -20：scrollTopscrollLeft

document.body.scrollLeft -= 20;
document.body.scrollTop -= 20;

答案 2

既然你想知道它是如何工作的，我将逐步解释它。

首先，您要将函数绑定为图像的单击处理程序：

$('#someImage').click(function () {
    // Code to do scrolling happens here
});

这会将单击处理程序应用于具有的图像。如果要对所有图像执行此操作，请替换为。id="someImage"'#someImage''img'

现在是实际的滚动代码：

获取图像偏移量（相对于文档）：

var offset = $(this).offset(); // Contains .top and .left