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，则只需更改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;

Answer 2

既然你想知道它是如何运作的，我会一步一步地解释它。

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

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

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

现在为实际的滚动代码：

获取图像偏移量（相对于文档）：

var offset = $(this).offset(); // Contains .top and .left

从top和left减去20：
```
offset.left -= 20;
offset.top -= 20;
```

现在为<body>和<html>的滚动顶部和滚动左侧CSS属性设置动画：

$('html, body').animate({
    scrollTop: offset.top,
    scrollLeft: offset.left
});

Answer 3

我见过的最简单的解决方案

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

Tutorial Here

Answer 4

查看jQuery.scrollTo插件。这是一个demo。

此插件有很多选项，超出了native scrollIntoView为您提供的选项。例如，您可以将滚动设置为平滑，然后在滚动完成时设置回调。

您还可以查看all the JQuery plugins tagged with "scroll"。

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();

Answer 7

经过反复试验，我想出了这个功能，也可以使用iframe。

function bringElIntoView(el) {    
    var elOffset = el.offset();
    var $window = $(window);
    var windowScrollBottom = $window.scrollTop() + $window.height();
    var scrollToPos = -1;
    if (elOffset.top < $window.scrollTop()) // element is hidden in the top
        scrollToPos = elOffset.top;
    else if (elOffset.top + el.height() > windowScrollBottom) // element is hidden in the bottom
        scrollToPos = $window.scrollTop() + (elOffset.top + el.height() - windowScrollBottom);
    if (scrollToPos !== -1)
        $('html, body').animate({ scrollTop: scrollToPos });
}

Answer 8

只是小费。仅适用于firefox

Element.scrollIntoView();

Answer 9

我的UI在拇指栏中有一个垂直滚动的拇指列表目标是将当前拇指放在拇指栏的中心。我从批准的答案开始，但发现有一些调整真正使当前拇指居中。希望这有助于其他人。

标记：

<ul id='thumbbar'>
    <li id='thumbbar-123'></li>
    <li id='thumbbar-124'></li>
    <li id='thumbbar-125'></li>
</ul>

jquery的：

// scroll the current thumb bar thumb into view
heightbar   = $('#thumbbar').height();
heightthumb = $('#thumbbar-' + pageid).height();
offsetbar   = $('#thumbbar').scrollTop();


$('#thumbbar').animate({
    scrollTop: offsetthumb.top - heightbar / 2 - offsetbar - 20
});

Answer 10

向下滚动到结尾或底部的简单2个步骤。

Step1：获得可滚动（对话）div的完整高度。

步骤2：使用该值在该可滚动（对话）div上应用scrollTop 在步骤1中获得。

var fullHeight = $('#conversation')[0].scrollHeight;

$('#conversation').scrollTop(fullHeight);

必须对会话div上的每个追加应用以上步骤。

Answer 11

试图找到一种能够处理所有情况的解决方案（用于动画滚动的选项，在滚动到视图中时在对象周围填充，甚至在诸如iframe之类的晦涩情况下也可以使用），最后我最终写出了自己的解决方案为此。由于当许多其他解决方案都失败时它似乎可以工作，所以我想分享一下：

function scrollIntoViewIfNeeded($target, options) {

    var options = options ? options : {},
    $win = $($target[0].ownerDocument.defaultView), //get the window object of the $target, don't use "window" because the element could possibly be in a different iframe than the one calling the function
    $container = options.$container ? options.$container : $win,        
    padding = options.padding ? options.padding : 20,
    elemTop = $target.offset().top,
    elemHeight = $target.outerHeight(),
    containerTop = $container.scrollTop(),
    //Everything past this point is used only to get the container's visible height, which is needed to do this accurately
    containerHeight = $container.outerHeight(),
    winTop = $win.scrollTop(),
    winBot = winTop + $win.height(),
    containerVisibleTop = containerTop < winTop ? winTop : containerTop,
    containerVisibleBottom = containerTop + containerHeight > winBot ? winBot : containerTop + containerHeight,
    containerVisibleHeight = containerVisibleBottom - containerVisibleTop;

    if (elemTop < containerTop) {
        //scroll up
        if (options.instant) {
            $container.scrollTop(elemTop - padding);
        } else {
            $container.animate({scrollTop: elemTop - padding}, options.animationOptions);
        }
    } else if (elemTop + elemHeight > containerTop + containerVisibleHeight) {
        //scroll down
        if (options.instant) {
            $container.scrollTop(elemTop + elemHeight - containerVisibleHeight + padding);
        } else {
            $container.animate({scrollTop: elemTop + elemHeight - containerVisibleHeight + padding}, options.animationOptions);
        }
    }
}

$target是一个jQuery对象，其中包含您希望在需要时滚动到视图中的对象。

options（可选）可以包含在对象中传递的以下选项：

options.$container-一个jQuery对象，指向$ target的包含元素（换句话说，带有滚动条的dom中的元素）。默认为包含$ target元素的窗口，并且足够聪明以选择iframe窗口。请记住在属性名称中包含$。

options.padding-滚动到视图中时对象上方或下方添加的像素填充。这样，它就不能紧贴窗口边缘。默认值为20。

options.instant-如果设置为true，则将不使用jQuery animate，并且滚动条将立即弹出到正确的位置。默认为false。

options.animationOptions-您希望传递给jQuery animate函数的所有jQuery选项（请参见http://api.jquery.com/animate/）。这样，您可以更改动画的持续时间，或者在滚动完成后执行回调函数。仅在options.instant设置为false时有效。如果您需要即时动画但需要回调，请设置options.animationOptions.duration = 0而不是使用options.instant = true。

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

11 个答案: