我有一个 HTML 文档，其中包含使用<ul><li><img.... 浏览器窗口具有垂直和水平滚动。
问题：
当我单击图像时<img>，如何让整个文档滚动到我刚刚单击的图像所在的位置top:20px; left:20px？
我在这里浏览过类似的帖子……尽管我对 JavaScript 很陌生，并且想了解我自己是如何实现这一点的。
如何使用 jQuery 让元素滚动到视图中？
IT技术
javascript
jquery
2021-02-28 23:36:36
6个回答
有一个名为 的 DOM 方法scrollIntoView，所有主要浏览器都支持该方法，它将元素与视口的顶部/左侧对齐（或尽可能靠近）。
$("#myImage")[0].scrollIntoView();
在支持的浏览器上，您可以提供以下选项：
$("#myImage")[0].scrollIntoView({
behavior: "smooth", // or "auto" or "instant"
block: "start" // or "end"
});
或者，如果所有元素都有唯一的 ID，您可以更改对象的hash属性以location支持后退/前进按钮：
$(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;
既然你想知道它是如何工作的，我会一步一步地解释它。
首先，您要绑定一个函数作为图像的点击处理程序：
$('#someImage').click(function () {
// Code to do scrolling happens here
});
这会将点击处理程序应用到带有id="someImage". 如果要对所有图像执行此操作，请替换'#someImage'为'img'.
现在是实际的滚动代码：
获取图像偏移量（相对于文档）：
var offset = $(this).offset(); // Contains .top and .left减去 20
top和left：offset.left -= 20; offset.top -= 20;现在动画的滚动顶部和滚动左CSS属性
<body>和<html>：$('html, body').animate({ scrollTop: offset.top, scrollLeft: offset.left });
我见过的最简单的解决方案
var offset = $("#target-element").offset();
$('html, body').animate({
scrollTop: offset.top,
scrollLeft: offset.left
}, 1000);
有一些方法可以将元素直接滚动到视图中，但是如果要滚动到元素的相对点，则必须手动进行：
在点击处理程序中，获取元素相对于文档的位置，减去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为您提供的功能。例如，您可以将滚动设置为平滑，然后设置滚动完成时的回调。
您还可以查看所有标记为 "scroll" 的 JQuery 插件。