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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (42)

我有一个网格格式的图像使用HTML文件<ul><li><img。浏览器窗口既有垂直滚动也有水平滚动。

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

提问于
用户回答回答于

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

首先,要将一个函数绑定为图像的点击处理程序:

$('#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 leftoffset.left -= 20; offset.top -= 20;
  3. 现在动画滚动顶部和滚动左的CSS属性<body><html>$('html, body').animate({ scrollTop: offset.top, scrollLeft: offset.left });
用户回答回答于

有一个DOM方法scrollIntoView,它得到所有主要浏览器的支持,这将使一个元素与视图端口的顶部/左边(或尽可能接近)对齐。

$("#myImage")[0].scrollIntoView();

在受支持的浏览器上,n1可以提供以下选项:

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

document.body.scrollLeft -= 20;
document.body.scrollTop -= 20;

扫码关注云+社区