调用div并将其放在页面的中心？

Question

我想使用html中的href跳转到目的地<div>。我使用<div>的id调用<div>并成功跳转。这是我的代码。

   <a href='#idx'>click here</a>
            |
            |
            |
            |
<div id="idx">test scroll up</div>

但是如果调用<div>，它的位置总是在页面的顶部。

我想要<div>在页面中心的位置，当<div>调用甚至click...how时，我可以使用javascript来实现吗？谢谢..

Answer 1

<a id="idx-link">click here</a>

js：

$('a#idx-link').click(function() {
    $('html, body').animate({
        scrollTop: ($("#idx").offset().top - 200)
    }, 800);
});

根据您希望div在动画之后的位置相应地更改200。

Answer 2

对于每个屏幕高度，

查看此处演示http://jsfiddle.net/yeyene/J3zyq/1/

JQUERY

$(document).ready(function() {
    $('a#gotoID').click(function() {
        var id_offset = ($(window).height() - $('#idx').height())/2;
        $('html, body').animate({
           scrollTop: ($("#idx").offset().top - (id_offset/1.5))
        }, 800);
    });
});