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

发布于 2022-07-28 22:56:06

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

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

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

关注者

被浏览

1 个回答

面试哥 2022-07-28

为面试而生，有面试问题，就找面试哥。
既然你想知道它是如何工作的，我会一步一步地解释它。

首先，您要将函数绑定为图像的单击处理程序：
```
$('#someImage').click(function () {
    // Code to do scrolling happens here
});
```
这会将点击处理程序应用于带有id="someImage". 如果要对所有图像执行此操作，请替换'#someImage'为'img'.

现在对于实际的滚动代码：
1. 获取图像偏移量（相对于文档）：
```
var offset = $(this).offset(); // Contains .top and .left
```
2. top从和中减去 20 left：
```
offset.left -= 20;
```
  offset.top -= 20;
3. <body>现在为 and 的 scroll-top和scroll-left CSS 属性设置动画<html>：
```
$('html, body').animate({
scrollTop: offset.top,
scrollLeft: offset.left
```
  });

知识点

面圈网VIP题库全新上线，海量真题题库资源。 90大类考试，超10万份考试真题开放下载啦