【问题标题】:Issue with anchor in chromechrome中的锚点问题
【发布时间】:2014-03-05 07:51:29
【问题描述】:

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

我不确定是否有来自我的任何其他代码的干扰,或者“解决方案”图片/文本的动画是否造成了问题,但我似乎无法自行解决。

需要注意的是,该链接确实有效,但前提是您已经选择了投资组合(例如 /#portfolio)

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

有什么想法吗?

【问题讨论】:

  • 第二次点击时它会到达正确的位置。

标签: html anchor


【解决方案1】:

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

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

【讨论】:

  • 我认为它也必须是动画,所以我删除它只是为了确保。即使没有动画,问题仍然存在。
【解决方案2】:

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

<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>

我无法告诉您为什么它会有所作为,但确实如此,感谢您的帮助!

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2018-02-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多