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

时间:2014-01-17 22:37:46

标签: javascript jquery html css

我的内容始于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之前创建另一个链接,但它不起作用。

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

由于

2 个答案:

答案 0 :(得分: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. 的形式
  4. 如果#logobox存在于<header id="main-header">这样的元素中,并且该元素没有上边距,那么您也可以在那里指向[返回顶部]按钮(在某些情况下,即。) #logobox上的margin top实际上会影响这个,具体取决于标题的CSS和HTML中的其他元素。
  5. 看看这个小提琴。 http://jsfiddle.net/willthemoor/Q7PCm/3/

答案 1 :(得分:0)

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