如何使用jQuery让元素滚动到视图中？
我有一个超文本标记语言文档，其中包含使用<ul><li><img...的网格格式的图像。浏览器窗口具有垂直和水平滚动。
问题：当我单击图像<img>时，如何让整个文档滚动到我刚刚单击的图像是top:20px; left:20px的位置？
我在这里浏览了一下类似的posts...although。我是JavaScript的新手，我想知道我自己是如何做到这一点的。
回答 11
Stack Overflow用户
发布于 2011-02-03 18:24:33
既然你想知道它是如何工作的，我将一步一步地解释。
首先，您希望绑定一个函数作为图像的单击处理程序：
$('#someImage').click(function () {
// Code to do scrolling happens here
});这将对具有id="someImage"的图像应用单击处理程序。如果要对所有图像执行此操作，请使用'img'替换'#someImage'。
现在来看实际的滚动代码：
- 获取图像偏移量(相对于文档)：
var offset = $(this).offset()；//包含.top和.left
- 从
top和left中减去20：
offset.left -= 20；offset.top -= 20；
- 现在为
<body>和<html>的顶部滚动和左侧滚动CSS属性添加动画效果：
$('html，body').animate({ scrollTop: offset.top，scrollLeft: offset.left });
Stack Overflow用户
发布于 2011-02-03 18:22:13
有一个名为scrollIntoView的DOM方法，所有主流浏览器都支持它，它可以将元素与视口的顶部/左侧对齐(或尽可能靠近)。
$("#myImage")[0].scrollIntoView();在支持的浏览器上，您可以提供以下选项：
$("#myImage")[0].scrollIntoView({
behavior: "smooth", // or "auto" or "instant"
block: "start" // or "end"
});或者，如果所有元素都有唯一的if，您可以只更改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;Stack Overflow用户
发布于 2017-06-26 10:32:00
我见过的最简单的解决方案
var offset = $("#target-element").offset();
$('html, body').animate({
scrollTop: offset.top,
scrollLeft: offset.left
}, 1000);https://stackoverflow.com/questions/4884839
复制相似问题