Question

我想在屏幕上居中一个div，这样当页面向下/向上滚动时，div会平滑地滚动到页面的中心。我正在尝试this code (please see jsfiddle),但不起作用。有人可以帮我吗？感谢。

Answer 1

你不需要jquery，只需使用css

<强> HTML

<div id="senad">content</div>

<强> CSS

 #senad { width: 200px; height: 200px; position: fixed; top: 50%; left: 50%; border: 1px solid gray;}

这将使元素保持在中心位置。

Answer 2

为什么不将它标记为position: fixed并将其保留在那里，无论用户在哪里滚动？那你就不需要任何形式的javascript技巧了。

然而，为了回答你当前的问题，似乎你提供了一次居中，你永远不会对窗口的滚动事件做出反应：

 $(window).scroll(function() { $('#box').center(); });

Answer 3

你走了。更新了滚动事件并考虑了document.body.scrollTop

http://jsfiddle.net/8Dupa/4/

$（window）.scroll（function（）{$（'＃box'）。center（）;}）;

并在中心（）

top + = document.body.scrollTop;

Answer 4

使用此插件：

jQuery.fn.center = function(){
this.css("position","absolute");
this.css("top","50%");
this.css("left","50%");
this.css("margin-top","-"+(this.height()/2)+"px");
this.css("margin-left","-"+(this.width()/2)+"px");
return this;}

$("#id").center();

jQuery：在页面中心保留一个div，即使页面向下滚动

4 个答案: