Javascript 如何确保在屏幕上显示HTML元素？_Javascript_Jquery_Html_Css

Javascript 如何确保在屏幕上显示HTML元素？

javascript jquery html css

Javascript 如何确保在屏幕上显示HTML元素？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,这是我的HTML结构： <body>

这是我的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>

这是我的Jquery代码：

.error{
    display: none;
}

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

上述代码的作用：当用户按下

，将显示

我想要的：当显示

时，如果它在屏幕上，那么什么也没有，但是如果它不在屏幕上，页面滚动并停止在屏幕上的

位置，我该怎么做

需要注意的是，我不希望这样：

position:fixed
试着这样做
<div id='focus' class='error'>error message</div>

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

错误消息
$（文档）。按键（功能（e）{
如果（e.which==13）{
$（'.error'）.show（）；
document.getElementById（'focus'）.scrollIntoview（）；
}
});
已创建
修改了你的JS，请看一看
$(document).keypress(function(e) {
    if(e.which == 13) {
        $('.error').show();
         $('.error')[0].scrollIntoView(true);
    }

});

使用br
@NooBskie似乎是一种糟糕的方式。实际上，这只是一个测试。是否希望error div滚动到窗口的位置？或者窗口滚动到div的位置？@robingordin Second。窗口将滚动到div的位置。您是否尝试过从jquery滚动到（）？或者看看这个问题，它可能涵盖了您的问题：谢谢，我需要scrollIntoview（）
+1投你一票。我可以设置顶部和div之间的20px
空间吗？实际上，我的网站有一个固定的标题，在这种情况下，div位于标题下。@Sajad是的，你可以检查我更新的小提琴。我在error div中添加了填充。现在它将保留20px的顶部填充