javascript - 使用 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

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

有什么办法解决这个问题吗？

谢谢

Answer 1

我假设您的 [Back to top] 按钮类似于 <a href="#logobox">Top</a> ？

无论#logobox 位于什么位置之后，这将始终将您带到下方 250 像素处，在本例中为窗口顶部(再次假设)。在 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"> 的元素中并且该元素没有顶部边距，您也可以将 [back to top] 按钮指向那里(在某些情况下，即。#logobox 上的边距顶部实际上会影响这一点，具体取决于标题的 css 和其他HTML 中的元素)。

看看这个 fiddle 。 http://jsfiddle.net/willthemoor/Q7PCm/3/