滚动到视口的中心(Scroll to the center of viewport)

I would like to center a div by clicking it. So if I'm clicking a div I want it to scroll to the center of the browser viewport. I don't want to use anchor points like the guides and examples I've seen. How can I achieve this?

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:

我有一个轻微修改报价; 如果“调整系数”（即（$（窗口）.height（） - $（本）.outerHeight（真））/ 2）<0，让你过冲在视口中该元素与您的滚动，你可以得到意想不到的结果。 我添加了一个最大值（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实现在垂直方向上滚动到中心。 而且它在水平方向上相似。 我不把元素的高度考虑，因为他们比屏幕的高度，也许更大。

文章来源: Scroll to the center of viewport