使用页内定位链接控制页面的位置

我在网页上有一个固定的顶部导航栏100px深，并且该栏上的链接转到id的页面。该ID与每个部分的h3标题相关联。不幸的是，点击链接后，页面向上移动，第一个100像素隐藏在固定顶栏后面。使用页内定位链接控制页面的位置

我可能会在页面中的其他地方嵌入id的位置，比我链接的点高出大约100px（在给定图形设计的时候并不那么容易）。我想知道有没有人知道有什么方法可以迫使这些ID在页面顶部停止100px？

不幸的是我不得不把开发网站放在维护屏幕后面，所以我不能提供一个URL。由于在期待（我的第一篇到计算器！）

杰里米

来源

2015-05-20 WebsWonder

你能为我们提供的代码片段？只是与您的问题相关的HTML/CSS/JS。你可以直接把它放在你的问题上，或与codepen分享...... – Dinei

这可能对你有帮助吗？ http://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header – rst

一种解决方案是使用:target伪类的标题转移约了一下。诀窍是将您的顶部padding增加固定元素的高度，然后将它们从顶部margin减去相同的数量，将它们移回页面。

所以，使用100像素的高固定件的例子，假设没有存在于你的h3元素padding或margin，这里的CSS会怎样看：

h3:target{ 
    margin:-100px 0 0; 
    padding:100px; 
}

您可能需要调整这些值，取决于您的设计，在固定元素和标题之间添加一点空间。

来源

2015-05-20 14:35:24 Shaggy

谢谢沙吉。这种工作.. ;-) 我已经删除了维护模式，所以你可以看看。请问剩下的，我还有很多事情要做;-) http://www.sanclerorganic.com/wordpress/ （后2015年7月跳过/ WordPress的）的CSS的主页http：//位。ly/1HxkzvH 我已将修复程序应用于顶部的“关于我们”链接，并指向该部分的div的ID #aboutuswrap：target { margin：-155px 0 0 0; padding：155px 0 0 0; } 旁边的“食谱”链接是我想要克服的 - 横幅背后隐藏的目标。谢谢，杰里米 – WebsWonder

我已经找到了答案

您可以在工作中看到它

http://www.sanclerorganic.com/wordpress

导航栏上的链接代码是

<a href="#recipeshomelink">Recipes</a>

和目标下来页面是

<div style="position:relative;"> 
<div id="recipeshomelink" style="position:absolute; top:-115px;"></div> 
</div>

很明显，-115px被调整以适应顶部酒吧的深度。

我希望这可以帮助他人。

杰里米

来源

2015-05-26 12:03:13 WebsWonder

使用页内定位链接控制页面的位置

回答

相关问题