我的内容以 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 框之前创建另一个链接,但它不起作用。
有什么办法解决这个问题吗?
谢谢
最佳答案
我假设您的 [Back to top] 按钮类似于 <a href="#logobox">Top</a>
?
无论#logobox 位于什么位置之后,这将始终将您带到下方 250 像素处,在本例中为窗口顶部(再次假设)。在 css 中,margin 是一个偏移量——#logobox 元素实际上偏移了 250px,所以当你跳转到它时,再向下移动 250px。您可以:
- 将#logobox 元素切换为使用
padding-top: 250px
如果这适用于您的设计。而不是margin-top: 250px
.这实际上使框的顶部保持在您认为它现在所在的位置(相对于从该位置偏移)。 - 放入一个带有 id 的空白元素,并将“返回顶部”按钮指向它。从历史上看,很容易成为互联网上最受欢迎的选择。通常,令人讨厌的是,形式为
<a name="top"></a>
- 如果#logobox 存在于类似
<header id="main-header">
的元素中并且该元素没有顶部边距,您也可以将 [back to top] 按钮指向那里(在某些情况下,即。#logobox 上的边距顶部实际上会影响这一点,具体取决于标题的 css 和其他HTML 中的元素)。
看看这个 fiddle 。 http://jsfiddle.net/willthemoor/Q7PCm/3/
关于javascript - 使用 margin-top 时平滑滚动到页面顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21197276/