javascript - 滚动到视口(viewport)的中心

Question

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

Answer 1

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

第一步

这是完成工作的脚本:

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

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

第二步

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

$(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/