从固定标题偏移页面锚

Question

我已经看过其他有关此问题的帖子，但是很遗憾，这些帖子都没有起作用，所以我在这里。

我试图使我的页眉（位置固定）链接到页面锚，但是当我按链接时，它越过了div的顶部和它的标题。 因此，要查看包括标题的整个div，则需要向上滚动。

我在这里有一个小提琴

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

Answer 1

您可以只使用CSS。 只需制作独立的隐藏锚元素，然后将其裁剪为标题的高度即可。

这是我使用的锚类：

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

JSFiddle （我只做前几个链接）： http : //jsfiddle.net/pp9dg/29/

Answer 2

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

它使用jquery将锚点偏移200像素。

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