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

Question

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

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

我在这里浏览了类似的帖子......虽然我对JavaScript很陌生,想要了解这是如何实现的.

Answer 1

scrollIntoView所有主流浏览器都支持一种名为DOM的方法,它将元素与视口的顶部/左侧对齐(或尽可能接近).

$("#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;

Answer 2

既然你想知道它是如何工作的,我会一步一步地解释它.

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

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

这将点击处理程序应用于图像id="someImage".如果要对所有图像执行此操作,请替换'#someImage'为'img'.

现在为实际的滚动代码:

获取图像偏移量(相对于文档):
```
var offset = $(this).offset(); // Contains .top and .left
```
Run Code Online (Sandbox Code Playgroud)
从减20 top和left:
```
offset.left -= 20;
offset.top -= 20;
```
Run Code Online (Sandbox Code Playgroud)
现在动画滚动顶部和滚动左的CSS属性<body>和<html>:
```
$('html, body').animate({
    scrollTop: offset.top,
    scrollLeft: offset.left
});
```
Run Code Online (Sandbox Code Playgroud)

为什么要重新发明轮子？`Element.scrollIntoView()`: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView (7认同)
非常感谢万亿,我不敢相信,与我在这里看到的其他一些帖子相比,这很简单,再次感谢 (5认同)
这仅适用于简单布局.当元素嵌套在多个溢出容器中时,它不像W3C` .scrollIntoView`方法那样处理所有情况. (3认同)

Answer 3

我见过最简单的解决方案

var offset = $("#target-element").offset();
$('html, body').animate({
    scrollTop: offset.top,
    scrollLeft: offset.left
}, 1000);

Answer 4

看看jQuery.scrollTo插件.这是一个演示.

这个插件有很多选项,超出了本机scrollIntoView为您提供的选项.例如,您可以将滚动设置为平滑,然后在滚动完成时设置回调.

Answer 5

有一些方法可以将元素直接滚动到视图中,但是如果要滚动到相对于元素的点,则必须手动执行:

在单击处理程序内部,获取元素相对于文档的位置,减去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));

Answer 6

这是一个快速的 jQuery 插件，可以很好地映射内置的浏览器功能：

$.fn.ensureVisible = function () { $(this).each(function () { $(this)[0].scrollIntoView(); }); };

...

$('.my-elements').ensureVisible();