javascript - 使用 <a href ="#id"> 时将目标对齐到中间

Question

当我使用

<a href="#id"> 
.
.
.
<dl>
 <dt></dt>
 <dd></dd>
 <dd id="id"></dd>
 <dd></dd>
<dl>

页面滚动到目标 ID，目标 ID 显示在页面顶部。目标是否可以显示在页面中间？

附言如果可能的话，我更愿意通过使用 css 来实现这一点。

Answer 1

DEMO

使用 JQuery 这可以实现如下

jQuery

$('.clickme').on("click", function () {
    var docHeight = $(window).height()/2;
    alert(docHeight)
    $('html,body').animate({
        scrollTop: ($('#target').offset().top - docHeight)+11
        // 11 is height of #target/2 or height of first line/2 for accuracy
    }, 1000);
});

希望对你有帮助