我有一个 HTML 文档，其中包含使用<ul><li><img.... 浏览器窗口具有垂直和水平滚动。
<ul><li><img...
问题： 当我单击图像<img>时，如何让整个文档滚动到我刚刚单击的图像所在的位置top:20px; left:20px？
<img>
top:20px; left:20px
我在这里浏览过类似的帖子......虽然我对 JavaScript 很陌生，并且想了解这是如何为自己实现的。
既然你想知道它是如何工作的，我会一步一步地解释它。
首先，您要将函数绑定为图像的单击处理程序：
$('#someImage').click(function () { // Code to do scrolling happens here });
这会将点击处理程序应用于带有id="someImage". 如果要对 所有 图像执行此操作，请替换'#someImage'为'img'.
id="someImage"
'#someImage'
'img'
现在对于实际的滚动代码：
获取图像偏移量（相对于文档）：
var offset = $(this).offset(); // Contains .top and .left
top从和中减去 20 left：
top
left
offset.left -= 20;
offset.top -= 20;
<body>现在为 and 的 scroll-top和scroll-left CSS 属性设置动画<html>：
<body>
<html>
$('html, body').animate({ scrollTop: offset.top, scrollLeft: offset.left
});
