【问题标题】:Anchor link linking to wrong place on page锚链接链接到页面上的错误位置
【发布时间】:2015-05-18 09:10:17
【问题描述】:

我在主导航的主页上有一个 div 链接。但是,该链接位于页面下方。它在 Firefox 中似乎可以正常工作,但在 Chrome 中却不行。这是链接:

http://purplecubed.com/home#what-we-do

有什么想法吗?

谢谢

【问题讨论】:

  • 我在console.log中看到很多错误,所以我认为你应该首先处理它们,然后检查你的//Navigation Scrolling in script.js,我很确定问题在那里。
  • 可以确认它在 Firefox 中运行良好。看起来您需要检查图像的源链接和 css 文件是否正确,因为很多都找不到。

标签: html css hyperlink anchor


【解决方案1】:

这只是推测,但似乎会发生以下情况:当您的页面加载包含非常长时间运行的 HTTP 请求时(例如您的一些 PNG 图像返回 404 但需要超过 5 秒这样做),Chrome 继续并在没有它们的情况下呈现页面,然后向下导航到适当的 div 位置。一旦请求完成但未返回图像,这些图像将占用的空间将折叠,并且您在视口上方获得的像素更少,看起来好像您在页面加载时降落在页面下方。

但是,FireFox 似乎正在渲染整个页面并等待所有请求返回,然后再尝试导航,这会导致丢失的图像在跳转到页面中的正确位置之前折叠。检查您的图像位置并修复 URL。这应该可以解决问题。如果没有,请在此处再次发表评论,我会寻找更好的解决方案。

【讨论】:

  • 我通过包装 jquery 平滑滚动代码 i $(window).load(function(){}) 解决了这个问题。这样它会在执行前等待所有内容加载完毕
猜你喜欢
  • 1970-01-01
  • 2019-08-08
  • 2016-09-08
  • 1970-01-01
  • 2015-12-08
  • 1970-01-01
  • 2017-06-09
  • 2013-07-06
  • 2013-09-08
相关资源
最近更新 更多