在chrome中锚定问题

时间:2014-03-05 07:51:30

标签: html anchor

我设置了单页面布局,因此我使用锚标记作为网站导航的一部分。除了组合标签之外,所有这些都在工作。当我从菜单中选择产品组合时,屏幕会跳到正确的部分,然后立即移动到上面的部分。

我不确定是否存在来自我的任何其他代码的干扰,或者“解决方案”图片/文字的动画是否会产生问题,但我似乎无法自行解决。< / p>

需要注意的是链接确实有效,但只有当你已经选择了投资组合时(例如/#portfolio)

我的网站是http://muvltd.com

有什么想法吗?

2 个答案:

答案 0 :(得分:1)

你的锚没有问题。问题是,在向下滚动之前,解决方案部分中的橙色圆圈不会显示,因此它们尚未呈现到页面中。这使得投资组合部分在您的页面中具有更高的绝对位置。 Chrome跳转到您的部分,第一次正常工作。但是当加载解决方案部分时,它会推动投资组合。

如果您知道解决方案部分的确切高度或部分中包含的图像,我建议您将此高度分配给相应的元素。这样,在实际加载/初始化内容之前,所有维度都已正确设置。

答案 1 :(得分:0)

我找到了一个解决方案,在原始代码中,锚标记位于段落标记之外:

<p style="text-align: center;padding-top: 55px;">[maxbutton id="5"]</p><a id="portfolio"></a>

将它们放在标签内解决了这个问题:

<p style="text-align: center;padding-top: 55px;">[maxbutton id="5"]<br><a id="portfolio"></a></p>

我不能告诉你它为什么会有所作为,但它确实有,谢谢你的帮助!