Question

我试图让div捕捉到视口的中心，现在它只是捕捉到顶部。我试图将偏移率设为50％，但只能在px＆s中获得。

修改的

我添加了一个新的小提琴，我尝试包含$(window).scrollTop() / 2)

$("#item").offset().top - 100

var body = $("html, body");
var items = $(".item");
var animating = false;

$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    if (!animating) {
        $.data(this, 'scrollTimer', setTimeout(function() {

            items.each(function(key, value) {
                if ($(value).offset().top > $(window).scrollTop()) {
                    animating = true;
                    $(body).stop().animate( { scrollTop: $(value).offset().top }, 1000,'swing');
                    setTimeout(function() { animating = false; }, 2000);
                    return false;
                }
            });
        }, 50));
    }
});

Answer 1

我发现了这个：

$('html, body').animate({scrollTop: $('#your-id').offset().top -100 }, 'slow');

来源：Run ScrollTop with offset of element by ID

Answer 2

以下是将视口集中在特定div上的技巧。

先决条件

您需要考虑以下三个条件才能将视口集中在给定的item上：

height显示在视口上的 last 项目。
最后项目距离页面顶部的距离，即项目的offset().top。
视口的高度值（即window对象）。

计算物品的垂直位置

scrollTop所需的window值可按如下方式计算：

var scrollValue = itemOffset  // offset of the item from the top of the page
                  - .5 * windowHeight // half the height of the window
                  + .5 * itemHeight;  // half the height of the item

基本上，您最初将视口的顶部移动到查看顶部偏移下的项目。正如您已经体验过的那样，将项目捕捉到窗口顶部。

当您将窗口高度的一半减去垂直方向的一半，然后将视图向下移动时，真正神奇的部分就出现了该项目的一半height。这使得项目在视口方面显示为垂直集中。

注意：

为了能够查询视口中出现的最后一项，您必须迭代所有具有顶部偏移值的元素（即{{ 1}}）小于或等于offset().top＆＃39; s window值：

scrollTop

有了上述内容，$.each($('.item'), function(i, value) { if ($(viewport).scrollTop() >= $(this).offset().top) { lastItemInView = $(this); } });变量将始终以窗口中可见的 last 元素结束。

Demo

Answer 3

不确定你是否想过这个但是我从这个答案（How to tell if a DOM element is visible in the current viewport?）中得到了一些代码，它们展示了如何判断一个元素在视口中是否可见。

使用它我修改了你的代码以遍历每个项目，并在视口中找到第一个可见的项目，然后将那个项目也放在你所拥有的margin-top中。如果这有帮助，请告诉我！

小提琴：http://jsfiddle.net/kZY9R/86/

var body = $("html, body");
var items = $(".item");
var animating = false;

$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    if (!animating) {
        $.data(this, 'scrollTimer', setTimeout(function() {

            items.each(function(key, value) {
                if (elementInViewport(value)) {
                    animating = true;
                    var margin = parseInt($(value).css('margin-top'));
                    $('html,body').animate({
                        scrollTop: $(value).offset().top - ($(window).height() + margin - $(value).outerHeight(true)) / 2
                    }, 200);
                    setTimeout(function() {
                        animating = false;
                    }, 2000);
                    return false;
                }
            });
        }, 50));
    }
});

function elementInViewport(el) {
    var top = el.offsetTop;
    var left = el.offsetLeft;
    var width = el.offsetWidth;
    var height = el.offsetHeight;

    while (el.offsetParent) {
        el = el.offsetParent;
        top += el.offsetTop;
        left += el.offsetLeft;
    }

    return (
        top < (window.pageYOffset + window.innerHeight) &&
        left < (window.pageXOffset + window.innerWidth) &&
        (top + height) > window.pageYOffset &&
        (left + width) > window.pageXOffset
    );
}

如何添加jQuery scrollTop偏移量？

3 个答案:

先决条件

计算物品的垂直位置

Demo