滚动到视口中心

Question

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

Answer 1

您必须以某种方式识别可点击元素。我构建了一个示例，它为此使用了class-attribute。

步骤 1

这是执行工作的脚本：

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

您尝试将容器滚动到页面顶部。您还必须计算并减去容器高度和视口高度之间的差值。将其除以二（因为您希望顶部和底部具有相同的空间，您就可以开始了。

第二步

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

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

第三步

设置一些 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

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

使用纯 JavaScript 在垂直方向上滚动到中心实现。在水平方向上也是类似的。 我没有考虑元素的高度，因为它们可能大于屏幕的高度。

Answer 3

我知道这个问题很老了，但现在，你可以使用scrollIntoView：

例如：

document.body.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'center' });

Answer 4

我要提供一点修改。
如果“调整因子”，即( $(window).height() - $(this).outerHeight(true) ) / 2 是< 0，您可能会得到不希望的结果，即您在滚动时会超出视口中的该元素。

我添加了一个max(0,adjustment factor) 来更正：

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