Question

下面的代码使用javascript关注第二个元素，但是聚焦的元素会粘在页面底部。我想在页面中心有专注元素如何做到这一点？

＆＃13;

$(function(){
    $("#two").focus();
});

＆＃13;

body{color:white;}
#fis{height:600px;width: 60px;background-color:red;}
#two{height:50px;width: 60px;background-color:green;}
#thr{height:600px;width: 60px;background-color:blue;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="fis">hello
    </div>
    <div id='two' tabindex='1'>mr
    </div>
    <div id='thr'>john
    </div>

＆＃13;

Answer 1

您可以使用JS选择焦点元素，然后将窗口滚动到它：

$('html, body').stop().animate({
    scrollTop: $(element_focused).offset().top
}, 300);

通过一点点数学计算，您可以计算所关注元素的中心并更改scrollTop值。

Answer 2

将margin:0 auto;左/右边距添加到auto以使元素水平居中：

$(function(){
    $("#two").focus().addClass('getCentered');
});

body{color:white;}
#fis{height:600px;width: 60px;background-color:red;}
#two{height:50px;width: 60px;background-color:green;}
#thr{height:600px;width: 60px;background-color:blue;}
.getCentered{margin:0 auto;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="fis">hello
    </div>
    <div id='two' tabindex='1'>mr
    </div>
    <div id='thr'>john
    </div>

如果您希望它始终在屏幕中心水平和垂直，即使使用滚动，您也可以使用fixed位置进行一些计算。使用css检查中心计算下方的片段：

$(function(){
    $("#two").focus().addClass('getCentered');
});

body{color:white;}
#fis{height:600px;width: 60px;background-color:red;}
#two{height:50px;width: 60px;background-color:green;}
#thr{height:600px;width: 60px;background-color:blue;}
.getCentered{position:fixed; left:50%; top:50%; margin:-25px 0 0 -30px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="fis">hello
    </div>
    <div id='two' tabindex='1'>mr
    </div>
    <div id='thr'>john
    </div>

如何集中精力元素？

2 个答案: