javascript - 滚动到视口中心

Question

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

Answer 1

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

步骤1

这是脚本，它可以完成工作：

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

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

第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

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