Question

这是我的 HTML 结构：

<body>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <div class='error'>error message</div>

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>

这是我的 CSS 代码：

.error{
    display: none;
}

这是我的 Jquery 代码：

// detect pressing enter on keyboard
$(document).keypress(function(e) {
    if(e.which == 13) {
        $('.error').show();
    }
});

以上代码的作用：当用户按<enter>时，将显示<div>。

我想要的内容：显示<div>时，如果它在屏幕上则没有任何内容，但如果它不在屏幕中，页面会滚动并停在<div>的位置在屏幕上，我该怎么办？

应该注意的是，我不希望这样： position: fixed;

Answer 1

创建fiddle

修改了你的JS，plz看看

$(document).keypress(function(e) {
    if(e.which == 13) {
        $('.error').show();
         $('.error')[0].scrollIntoView(true);
    }

});

Answer 2

尝试这样做。

<div id='focus' class='error'>error message</div>

$(document).keypress(function(e) {
    if(e.which == 13) {
        $('.error').show();
        document.getElementById('focus').scrollIntoview();
    }
});

如何在显示时确保HTML元素在屏幕中？

2 个答案: