【问题标题】:Offsetting page anchor from fixed header从固定标题偏移页面锚点
【发布时间】:2015-03-23 23:18:39
【问题描述】:

我已经查看了有关此问题的其他帖子,但可惜没有一个有效,所以我在这里。

我试图让我的标题(位置固定)链接到页面锚点,但是当我按下链接时,它会越过 div 的顶部和它的标题。因此,要查看包括标题在内的整个 div,您需要向上滚动。

我有一个Fiddle of it here

.wrapper {
width: 100%;
height: 1000px;
margin: 130px auto;
padding: 0;
background-color: aliceblue;}

【问题讨论】:

  • 如果您从包装器中删除边距并添加 200px 的 padding-top 会怎样?
  • 只要不留下大量空白,这将起作用。

标签: javascript html css offset


【解决方案1】:

您可以只使用 CSS。只需制作独立的隐藏锚元素并将它们剪辑到标题的高度即可。

这是我使用的锚类:

a.anchor {
 display: block;
 position: relative;
 top: -250px;
 visibility: hidden;
    height:0px;
}

JSFiddle(我只做了前几个链接):http://jsfiddle.net/pp9dg/29/

【讨论】:

  • =) 太棒了!乐于助人
【解决方案2】:

这是一个更新的小提琴:http://jsfiddle.net/pp9dg/28/

它使用 jquery 将锚点偏移 200px。

$(window).on("hashchange", function () {
    window.scrollTo(window.scrollX, window.scrollY - 200);
});

【讨论】:

  • 当我按两次链接时,它会重定向到给定 div 的标题下方。有没有办法解决这个问题。
猜你喜欢
  • 1970-01-01
  • 2012-02-21
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多