Question

因此，如果我正确理解http://api.jquery.com/offset，$（'body'）。offset（）应返回相对于文档的主体所在的位置。因此，在页面上的那些坐标处插入<p> - 标记应该将其放在body标记的正确位置。但事实并非如此！

我在Safari 5.0.5和Firefox 3.6中都试过这个，两种情况下，警报显示“8”，<p> - 标签最终距离页面顶部8个像素，而body标签开始页面上方向下100个像素，如使用例如firebug进行检查时可以看到。

<!doctype html>
<html>
<head></head>
<body>
  <div style="margin-top:100px;background:yellow;">
    <p>Hello World</p>
  </div>

  <script type="text/javascript"         src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
  </script>
  <script>
    alert(jQuery('body').offset().top);
    var myp = jQuery('<p>Top of body?</p>')
    myp.appendTo(jQuery('body'));
    myp.offset(jQuery('body').offset());
  </script>

</body>

所以问题是：我应该如何做到这一点，以便<p> - 标签最终在正文中，而不是在页面顶部，使用.offset（）？

Answer 1

在大多数情况下，你会发现身体偏移量等于0，这是因为页面的主体是==你的浏览器视口。

Hello World下载100px的原因是因为你已经应用了填充。你想要你的文字“身体顶部吗？”出现在Hello World下面？..

如果是这样，首先给你的div一个类名（我用过hworld），然后将你的var附加到它。

<div style="margin-top:100px;background:yellow;" class="hworld">

和

myp.appendTo(jQuery('.hworld'));

希望这会有所帮助......

Answer 2

必须有其他东西干扰您的代码。

我在这个小提琴中工作得很好：http://jsfiddle.net/jasongennaro/7sGGq/

使用margin-top时，JQuery（'body'）。offset（）。top是关闭的？

2 个答案: