使用margin-top时，平滑滚动到页面顶部

Question

我的内容始于logobox是第一件事：

#logobox { width: 178px; height: 204px; margin-left: auto; margin-right: auto; margin-top: 250px; }

我正在使用以下脚本：http://www.paulund.co.uk/smooth-scroll-to-internal-links-with-jquery

我创建了一个“返回顶部”按钮，但它只会滚动回到logobox开始的位置，而不会滚动到页面顶部。尝试在logobox之前创建另一个链接，但它不起作用。

任何想法如何解决这个问题？

由于

Answer 1

我假设您的[返回顶部]按钮类似于<a href="#logobox">Top</a>？

这总是会让你比之前的#logobox低250px，在这种情况下是窗口的顶部（再次假设）。在css中，margin是一个偏移量 - 元素#logobox实际上偏移了250px，所以当你跳转到它时，250px会进一步下降。你可以：

1. 如果适用于您的设计，请将#logobox元素切换为使用padding-top: 250px。而不是margin-top: 250px。这实际上保持了你认为现在正好的盒子的顶部（相对于那个位置的偏移）。
2. 放入一个带有ID的空白元素，然后将“返回顶部”按钮指向它。从历史上看，这是互联网最受欢迎的选择。通常，令人讨厌的是，以<a name="top"></a>
的形式
3. 如果#logobox存在于<header id="main-header">这样的元素中，并且该元素没有上边距，那么您也可以在那里指向[返回顶部]按钮（在某些情况下，即。） #logobox上的margin top实际上会影响这个，具体取决于标题的CSS和HTML中的其他元素。

看看这个小提琴。 http://jsfiddle.net/willthemoor/Q7PCm/3/

Answer 2

可能会在body标记中添加一个id，并使您的按钮指向它。