Question

我想通过Javascript将一个元素滚动到另一个元素的中心。这是一个例子：

<div class=container>
    <div id=e1>1</div>
    <div id=e2>2</div>
    ...
</div>

如何将给定元素滚动到容器的中心？＃e4的链接几乎可以实现，但它会将元素滚动到顶部。

Answer 1

添加此jQuery脚本

$( document ).ready(function() {
    $("#goto").click(function() {
        $(".container").scrollTop($(".container").scrollTop()+($("#e4").position().top - $(".container").height()/2) );    
    })
});

HTML修改

<div id="goto" >Go to element 4</div>

使用jQuery工作。 Credits ketan

Fiddle Link

它取决于要滚动到中心的div的大小。计算取决于你。

Answer 2

你可以使用JQuery比其他更容易。

$( document ).ready(function() {
    $("#goto").click(function() {
        $(".container").scrollTop($(".container").scrollTop()+($("#e4").position().top - $(".container").height()/2) );    
    })
});

检查Fiddle Here.

将HTML元素滚动到另一个元素的中心

2 个答案: