Question

我想通过点击它来div居中。因此，如果我点击div，我希望它滚动到浏览器视口的中心。我不想像我看到的指南和例子那样使用锚点。我怎样才能做到这一点？

Answer 1

在某种程度上，您必须识别可点击元素。我构建了一个示例，它使用了class - 属性。

第1步

这是完成工作的脚本：

$('html,body').animate({
    scrollTop: $(this).offset().top - ( $(window).height() - $(this).outerHeight(true) ) / 2
}, 200);

您尝试将容器滚动到页面顶部。您还必须计算和减去容器高度和视口高度之间的差异。将其除以2（因为你想在顶部和底部有相同的空间，你准备好了。

第2步

然后将点击处理程序添加到所有元素：

$(document).ready(function () {
    $('.image').click( function() {
        $('html,body').animate({ scrollTop: $(this).offset().top - ( $(window).height() - $(this).outerHeight(true) ) / 2  }, 200);
    });
});

第3步

设置一些HTML / CSS：

<style>

    div.image {

        border:     1px solid red;
        height:     500px;
        width:      500px;
    }

</style>

<div class="image">1</div>
<div class="image">2</div>
<div class="image">3</div>
<div class="image">4</div>
<div class="image">5</div>

你已经完成了。

查看演示

亲自试用http://jsfiddle.net/insertusernamehere/3T9Py/

Answer 2

我提供了一点修改;如果“调整因子”（即（$（window）.height（） - $（this）.outerHeight（true））/ 2）是＆lt; 0您可以获得不良结果，从而使用滚动来覆盖视口中的该元素。我添加了一个max（0，调整因子）来纠正：

function scrollIntoView(el) {

    var offsetTop = $j(el).offset().top;
    var adjustment = Math.max(0,( $j(window).height() - $j(el).outerHeight(true) ) / 2);
    var scrollTop = offsetTop - adjustment;

    $j('html,body').animate({
        scrollTop: scrollTop
    }, 200);
}

Answer 3

HTMLElement.prototype.scrollToCenter = function(){
    window.scrollBy(0, this.getBoundingClientRect().top - (window.innerHeight>>1));
}

使用纯JavaScript实现在垂直方向上滚动到中心。它在水平方向上相似。我不会采取任何因素。高度考虑，因为它们可能大于屏幕的高度。

Answer 4

我知道这个问题很旧，但是现在，您可以使用scrollIntoView：

例如：

rate

滚动到视口中心

4 个答案:

第1步

第2步

第3步

查看演示